starting setting modal

src/App.tsx

@@ -1,5 +1,6 @@
 // import CompanyInfoModal from "./components/CompanyInfoModal/CompanyInfoModal";
-import NotificationModal from "./components/NotificationModal/NotificationModal";
+// import NotificationModal from "./components/NotificationModal/NotificationModal";
+import UserSettingModal from "./components/UserSettingModal/UserSettingModal";
 import "./App.css";
 
 function App() {
@@ -7,6 +8,7 @@ function App() {
     <div className="flex justify-center border border-black h-screen">
       {/* <CompanyInfoModal /> */}
       {/* <NotificationModal /> */}
+      <UserSettingModal />
     </div>
   );
 }

src/components/ProfileSetting/ProfileSetting.tsx

@@ -0,0 +1,65 @@
+import CopyIcon from "../../icons/CopyIcon/CopyIcon";
+import IconWrapper from "../../icons/IconWrapper/IconWrapper";
+import IProfile from "../../types/profile";
+
+interface IProfileSettingProps {
+  profile: IProfile;
+}
+
+const ProfileSetting = ({ profile }: IProfileSettingProps) => {
+  return (
+    <div className="flex  flex-col">
+      <div className="p-6 flex gap-6 border-b border-b-[#DAE0E5] w-full">
+        <div className="w-22 h-22">
+          <img src={profile.avatar} alt={profile.fullname} />
+        </div>
+        <div className="flex flex-col gap-4">
+          <div className="flex justify-between w-[280px]">
+            <div className="flex flex-col gap-1">
+              <div className="text-[#77828C] text-[12px]">Имя</div>
+              <div className="text-[12px]">{profile.fullname}</div>
+            </div>
+            <IconWrapper className="self-center text-[#77828C] cursor-pointer">
+              <CopyIcon />
+            </IconWrapper>
+          </div>
+          <div className="flex justify-between w-[280px]">
+            <div className="flex flex-col gap-1">
+              <div className="text-[#77828C] text-[12px]">Email</div>
+              <div className="text-[12px]">{profile.email}</div>
+            </div>
+            <IconWrapper className="self-center text-[#77828C] cursor-pointer">
+              <CopyIcon />
+            </IconWrapper>
+          </div>
+          <div className="flex justify-between w-[280px]">
+            <div className="flex flex-col gap-1">
+              <div className="text-[#77828C] text-[12px]">Телефон</div>
+              <div className="text-[12px]">{profile.phone}</div>
+            </div>
+            <IconWrapper className="self-center text-[#77828C] cursor-pointer">
+              <CopyIcon />
+            </IconWrapper>
+          </div>
+          <div className="flex justify-between w-[280px]">
+            <div className="flex flex-col gap-1">
+              <div className="text-[#77828C] text-[12px]">Должность</div>
+              <div className="text-[12px]">{profile.jobTitle}</div>
+            </div>
+            <IconWrapper className="self-center text-[#77828C] cursor-pointer">
+              <CopyIcon />
+            </IconWrapper>
+          </div>
+          <button className="outline-none w-fit py-2 px-4 text-[12px] text-[#77828C]">
+            Выйти из аккаунта
+          </button>
+        </div>
+      </div>
+      <div className="flex gap-6 p-6">
+        <div className="text-[12px] font-semibold">Тема</div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSetting;

src/components/UserSettingModal/UserSettingModal.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import CrossIcon from "../../icons/CrossIcon/CrossIcon";
+import IconWrapper from "../../icons/IconWrapper/IconWrapper";
+import ProfileSetting from "../ProfileSetting/ProfileSetting";
+import currentProfile from "../../mock/currentUser";
+
+const UserSettingModal = () => {
+  const [currentTab, setCurrentTab] = useState<"Профиль" | "Уведомления">(
+    "Профиль"
+  );
+
+  function handleOnTabClick(tab: "Профиль" | "Уведомления") {
+    return () => {
+      if (tab === "Профиль") {
+        setCurrentTab("Профиль");
+      }
+      if (tab === "Уведомления") {
+        setCurrentTab("Уведомления");
+      }
+    };
+  }
+
+  return (
+    <div className="bg-white w-[448px] h-[708px] m-auto rounded-[8px]">
+      <div className="p-4 flex justify-between border-b border-b-[#DAE0E5]">
+        <div className="font-semibold text-sm">
+          <div className="flex gap-[24px]">
+            <button
+              onClick={handleOnTabClick("Профиль")}
+              className={`${
+                currentTab === "Профиль" ? "text-[#111C26]" : "text-[#77828C]"
+              }`}
+            >
+              Профиль
+            </button>
+            <button
+              onClick={handleOnTabClick("Уведомления")}
+              className={`${
+                currentTab === "Уведомления"
+                  ? "text-[#111C26]"
+                  : "text-[#77828C]"
+              }`}
+            >
+              Уведомления
+            </button>
+          </div>
+        </div>
+        <IconWrapper className="w-[11.3px] h-[11.3px] cursor-pointer text-[#77828C] self-center">
+          <CrossIcon />
+        </IconWrapper>
+      </div>
+      <ProfileSetting profile={currentProfile} />
+    </div>
+  );
+};
+
+export default UserSettingModal;

src/mock/currentUser.ts

@@ -0,0 +1,12 @@
+import IProfile from "../types/profile";
+
+const currentProfile: IProfile = {
+    fullname: "Анастасия Кошкина",
+    email: "sl.knst@mail.com",
+    avatar: "profile.png",
+    phone: "8 800 800 80 08",
+    jobTitle: "Менеджер отдела продаж",
+    id: "1"
+}
+
+export default currentProfile;

src/types/profile.ts

@@ -0,0 +1,10 @@
+interface IProfile {
+    fullname: string,
+    email: string, 
+    avatar: string,
+    phone: string,
+    jobTitle: string,
+    id: string
+}
+
+export default IProfile;