feat: modal with settings profile

i18n.server.js

@@ -16,7 +16,7 @@ export function createI18nInstance() {
     .init({
       fallbackLng: "en",
       preload: ["en", "ru"],
-      ns: ["common", "auth", "chat"],
+      ns: ["common", "auth", "chat", "profile"],
       defaultNS: "common",
       backend: {
         loadPath: __dirname + "/locales/{{lng}}/{{ns}}.json",

locales/en/profile.json

@@ -0,0 +1,15 @@
+{
+  "deletePhoto": "Delete photo",
+  "changePhoto": "Change photo",
+  "name": "Name",
+  "username": "@userName",
+  "nameAndUsername": "Name and Username",
+  "tellAboutYou": "Tell about you",
+  "save": "Save",
+  "language": "Language",
+  "chooseLanguagePlatform": "Choose a platform language",
+  "country": "Country",
+  "writeYourCounty": "Indicate the city for personalization of ads",
+  "aboutMyself":  "About myself",
+  "account": "Account"
+}

locales/ru/profile.json

@@ -0,0 +1,15 @@
+{
+  "deletePhoto": "Удалить фото",
+  "changePhoto": "Изменить фото",
+  "name": "Имя",
+  "username": "@Юзернейм",
+  "nameAndUsername": "Имя и имя пользователя",
+  "tellAboutYou": "Расскажите о себе",
+  "save": "Сохранить",
+  "language": "Язык",
+  "chooseLanguagePlatform": "Выберете язык платформы",
+  "country": "Город",
+  "writeYourCounty": "Укажите город для персонализации объявлений",
+  "aboutMyself":  "О себе",
+  "account": "Аккаунт"
+}

src/pages/profile/Profile.tsx

@@ -1,23 +1,72 @@
 import { useGetProfileQuery } from "../../services/api/sharebookApi.ts";
+import { Modal, Segmented } from "antd";
 import { ProfileInfo } from "./info";
 import { useParams } from "react-router";
 import { ProfileOwnButtons } from "./ownButtons";
 import { ProfileOtherButtons } from "./otherButtons";
+import { useState } from "react";
+import { AboutMySelf } from "./aboutMySelf";
+import styles from "./proflie.module.scss";
+import { Account } from "./account";
+import {useTranslation} from "react-i18next";
+
+type Section = 'about' | 'account';
 
 export function Profile() {
   let { userId } = useParams();
+  const {t} = useTranslation("profile")
+  const [isOpenSettingModal, setIsOpenSettingModal] = useState(false);
+  const [activeSection, setActiveSection] = useState<Section>('about');
 
   if (userId === "0" || userId === "my" || !userId || !isFinite(+userId)) {
     userId = "-1";
   }
 
   const isOwnProfile = userId === "-1";
-
   const { data } = useGetProfileQuery({ userId, zone: 1 });
 
   return (
     <ProfileInfo profile={data} isOwnProfile={isOwnProfile}>
-      {isOwnProfile ? <ProfileOwnButtons /> : <ProfileOtherButtons />}
+      {isOwnProfile ? (
+        <ProfileOwnButtons setIsOpenSettingModal={setIsOpenSettingModal} />
+      ) : (
+        <ProfileOtherButtons />
+      )}
+
+      <Modal
+        width={650}
+        centered
+        closable
+        maskClosable
+        footer={null}
+        getContainer={false}
+        open={isOpenSettingModal}
+        onCancel={() => setIsOpenSettingModal(false)}
+        classNames={{
+          content: styles.modal,
+          body: styles.containerModal,
+        }}
+        title={
+          <div className={styles.header}>
+            <Segmented
+              options={[
+                { label: t("aboutMyself"), value: 'about' },
+                { label: t("account"), value: 'account' },
+              ]}
+              block
+              value={activeSection}
+              onChange={(val) => setActiveSection(val as Section)}
+              style={{ width: "90%" }}
+            />
+          </div>
+        }
+      >
+        {activeSection === 'about' ? (
+          <AboutMySelf />
+        ) : (
+          <Account />
+        )}
+      </Modal>
     </ProfileInfo>
   );
 }

src/pages/profile/aboutMySelf/AboutMySelf.tsx

@@ -0,0 +1,38 @@
+import styles from "./aboutMySelf.module.scss";
+import {Button, Input} from "antd";
+import avatar from "../info/nikolay.png"
+import {useTranslation} from "react-i18next";
+
+export function AboutMySelf() {
+  const {t} = useTranslation("profile")
+  return (
+    <>
+      <div className={styles.blockAvatar}>
+        <img
+          src={avatar}
+          className={styles.avatar}
+          alt="avatar"/>
+        <div>
+          <Button danger type="link">{t("deletePhoto")}</Button>
+          <Button type="link">{t("changePhoto")}</Button>
+        </div>
+      </div>
+      <form className={styles.form}>
+        <div>
+          <span className={styles.titleOfInput}>{t("nameAndUsername")}</span>
+          <div className={styles.blockOfNameAndLoginInput}>
+            <Input placeholder={t("name")}/>
+            <Input placeholder={t("username")}/>
+          </div>
+        </div>
+        <div>
+          <span className={styles.titleOfInput}>{t("tellAboutYou")}</span>
+          <Input.TextArea rows={5} autoSize={false}/>
+        </div>
+        <div className={styles.blockOfButton}>
+          <Button type="primary">{t("save")}</Button>
+        </div>
+      </form>
+    </>
+  )
+}

src/pages/profile/aboutMySelf/aboutMySelf.module.scss

@@ -0,0 +1,36 @@
+
+.blockAvatar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  margin-top: 25px;
+}
+
+.titleOfInput {
+  font-weight: 500;
+}
+
+.blockOfNameAndLoginInput {
+  display: flex;
+  gap: 10px
+}
+
+.blockOfButton {
+  display: flex;
+  justify-content: end;
+}

src/pages/profile/aboutMySelf/index.ts

@@ -0,0 +1 @@
+export {AboutMySelf} from './AboutMySelf.tsx'

src/pages/profile/account/Account.tsx

@@ -0,0 +1,31 @@
+import styles from "./account.module.scss";
+import {Button, Select} from "antd";
+import {useTranslation} from "react-i18next";
+
+
+export function Account() {
+  const {t} = useTranslation("profile")
+  return (
+    <div className={styles.settingsBlock}>
+      <div>
+        <div className={styles.settingsItem}>
+          <div>
+            <div className={styles.settingsTitle}>{t("language")}</div>
+            <div className={styles.settingsCaption}>{t("chooseLanguagePlatform")}</div>
+          </div>
+          <Select value={['Русский', "Английский"]}/>
+        </div>
+        <div className={styles.settingsItem}>
+          <div>
+            <div className={styles.settingsTitle}>{t("country")}</div>
+            <div className={styles.settingsCaption}>{t("writeYourCounty")}</div>
+          </div>
+          <Select value={["Санкт-Петербург"]}/>
+        </div>
+      </div>
+      <div className={styles.blockButton}>
+        <Button type="primary">{t("save")}</Button>
+      </div>
+    </div>
+  )
+}

src/pages/profile/account/account.module.scss

@@ -0,0 +1,34 @@
+
+.settingsBlock {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 93.69%;
+  gap: 20px;
+}
+
+.settingsItem {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #F1F4F6;
+  padding: 20px 0;
+}
+
+.settingsItemBlockOfTitle {
+  display: flex;
+  flex-direction: column;
+}
+
+.settingsTitle {
+  font-weight: 500;
+}
+
+.settingsCaption {
+  font-size: 14px;
+  color: #909090;
+}
+
+.blockButton {
+  display: flex;
+  justify-content: end;
+}

src/pages/profile/account/index.tsx

@@ -0,0 +1 @@
+export {Account} from "./Account.tsx"

src/pages/profile/ownButtons/ProfileOwnButtons.tsx

@@ -1,10 +1,14 @@
 import { Button } from "antd";
 import styles from "./profileOwnButtons.module.scss";
 
-export function ProfileOwnButtons() {
+interface IProfileOwnButtons {
+  setIsOpenSettingModal: (isOpenSettingModal: boolean) => void
+}
+
+export function ProfileOwnButtons({ setIsOpenSettingModal}: IProfileOwnButtons) {
   return (
     <>
-      <Button className={styles.settingsButton}>⚙️</Button>
+      <Button onClick={() => setIsOpenSettingModal(true)} className={styles.settingsButton}>⚙️</Button>
       <Button type="primary">Новое объявление</Button>
     </>
   );

src/pages/profile/proflie.module.scss

@@ -0,0 +1,13 @@
+.modal {
+  height: 603px;
+}
+
+.containerModal {
+  padding: 20px;
+  height: 100%;
+}
+
+.header {
+  margin-top: -6px;
+  margin-bottom: 20px;
+}