starting setting modal

2023-12-05 18:42:27 +05:00
parent e378807cd6
commit 7cb3eee22d
6 changed files with 147 additions and 1 deletions
@@ -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;