feat: add settings

src/locales/en/en.json

@@ -37,6 +37,13 @@
     "title": "Notifications",
     "empty": "No notifications"
   },
+  "settings": {
+    "title": "Settings",
+    "account": "Account",
+    "deleteAccount": "Delete account",
+    "recoverPassword": "Recover password",
+    "logout": "Logout"
+  },
   "pincode": {
     "enterTitle": "Enter your PIN Code",
     "createTitle": "Create your PIN Code",

src/locales/ru/ru.json

@@ -37,6 +37,13 @@
     "title": "Уведомления",
     "empty": "Нет уведомлений"
   },
+  "settings": {
+    "title": "Настройки",
+    "account": "Аккаунт",
+    "deleteAccount": "Удалить аккаунт",
+    "recoverPassword": "Восстановить пароль",
+    "logout": "Выйти"
+  },
   "pincode": {
     "enterTitle": "Введите PIN-код",
     "createTitle": "Создайте PIN-код",

src/pages/Notifications/Notifications.css

@@ -14,7 +14,7 @@
 
 .notification {
     padding: 1rem;
-    background: #ffffff;
+    background: var(--content-bg-color);
     border-radius: 0.5rem;
 }
 

src/pages/Settings/Settings.css

 .settings {
     padding: 0 1rem;
+}
+
+.settings__title {
+    margin-bottom: 1rem;
+}
+
+.settings__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.settings__content__action {
+    padding: 1rem;
+    background: var(--content-bg-color);
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+}
+
+.settings__content__action__icon {
+    font-size: 1.2rem;
 }
\ No newline at end of file

src/pages/Settings/Settings.tsx

 import React from "react";
 import "./Settings.css";
+import { useLanguage } from "../../contexts/LanguageContext/useLanguage";
+import CSelect from "../../components/CSelect";
+import en from "../../assets/images/flag-en.png";
+import ru from "../../assets/images/flag-ru.png";
+import { FiUserMinus } from "react-icons/fi";
+import { IoKeyOutline } from "react-icons/io5";
+import { MdOutlineLogout } from "react-icons/md";
+import { useTranslation } from "react-i18next";
 
 const Settings: React.FC = () => {
-  return <div className="settings">Settings</div>;
+  const { language, changeLanguage } = useLanguage();
+  const { t } = useTranslation();
+
+  return (
+    <div className="settings">
+      <h3 className="settings__title">{t("settings.title")}</h3>
+
+      <div className="settings__content">
+        <CSelect
+          value={language}
+          onChange={(flag: string) => changeLanguage(flag as "en" | "ru")}
+          options={[
+            {
+              label: "English",
+              value: "en",
+              image: (
+                <img
+                  src={en}
+                  alt="en"
+                  style={{ width: 20, height: 20, objectFit: "cover" }}
+                />
+              ),
+            },
+            {
+              label: "Русский",
+              value: "ru",
+              image: (
+                <img
+                  src={ru}
+                  alt="ru"
+                  style={{ width: 20, height: 20, objectFit: "cover" }}
+                />
+              ),
+            },
+          ]}
+        />
+
+        <h3>{t("settings.account")}</h3>
+
+        <div className="settings__content__action">
+          <FiUserMinus className="settings__content__action__icon" />{" "}
+          {t("settings.deleteAccount")}
+        </div>
+
+        <div className="settings__content__action">
+          <IoKeyOutline className="settings__content__action__icon" />{" "}
+          {t("settings.recoverPassword")}
+        </div>
+
+        <div className="settings__content__action">
+          <MdOutlineLogout className="settings__content__action__icon" />{" "}
+          {t("settings.logout")}
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Settings;

src/styles/global.css

@@ -44,6 +44,7 @@ body {
 html[data-theme='light'] {
     --background-color: #F5F5F5;
     --on-background-color: #000000;
+    --content-bg-color: #FFFFFF;
     --text-color: #000000;
     --on-text-color: #ffffff
 }
@@ -51,6 +52,7 @@ html[data-theme='light'] {
 html[data-theme='dark'] {
     --background-color: #000000;
     --on-background-color: #ffffff;
+    --content-bg-color: #000000;
     --text-color: #ffffff;
     --on-text-color: #000000;
 }
\ No newline at end of file