finished modals

Co-authored-by: Aleksey <inmake@users.noreply.github.com>

src/App.tsx

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

src/components/CompanyInfoModal/CompanyInfoModal.tsx

@@ -23,7 +23,7 @@ const companyEmployeeItems: ICompanyEmployee[] = [
   },
   {
     name: "Анастасия Кошкина",
-    status: "at demonstration",
+    status: "atDemo",
     image: "Employee.png",
     id: "3",
   },

src/components/EmployeeItem/EmployeeItem.tsx

@@ -7,20 +7,19 @@ interface EmployeeItemProps {
 const EmployeeItem = ({ employee }: EmployeeItemProps) => {
   const { image, id, name, status } = employee;
   const statusColor = {
-    online: { color: "#49A1F5", label: "В сети" },
-    offline: { color: "#27AE60", label: "Не в сети" },
-    "at demonstration": { color: "#EB5757", label: "На демонстрации" },
+    online: { color: "text-[#49A1F5]", label: "В сети" },
+    offline: { color: "text-[#27AE60]", label: "Не в сети" },
+    atDemo: { color: "text-[#EB5757]", label: "На демонстрации" },
   };
+  const { color, label } = statusColor[status];
 
   return (
     <div className="flex gap-2" key={id}>
       <img src={image} alt={name} className="rounder-full w-8 h-8" />
       <div className="flex flex-col">
         <div className="h-5 text-sm ">{name}</div>
-        <div
-          className={`h-3 text-[10px] font-semibold leading-3 text-[${statusColor[status].color}]`}
-        >
-          • {statusColor[status].label}
+        <div className={`h-3 text-[10px] font-semibold leading-3 ${color}`}>
+          • {label}
         </div>
       </div>
     </div>

src/components/NotificationItem/NotificationItem.tsx

@@ -10,7 +10,7 @@ interface NotificationItemProps {
 }
 
 const NotificationItem = ({ notification }: NotificationItemProps) => {
-  const date = format(parseISO(notification.date), "dd.mm.yyyy");
+  const date = format(parseISO(notification.date), "dd.MM.yyyy");
   const [selectedNotificationIds, setSelectedNotificationIds] = useState<
     string[]
   >([]);
@@ -49,11 +49,10 @@ const NotificationItem = ({ notification }: NotificationItemProps) => {
           <SystemNotificationIcon />
         </IconWrapper>
       )}
-      <div className="flex flex-col align-middle w-[400px]">
-        <div className="flex justify-between ">
-          <div className="text-[12px] h-8 flex">
-            <p className="self-center">{notification.title}</p>
-          </div>
+      <div className="">
+        <div className="flex justify-between h-8">
+          <p className="text-xs self-center">{notification.title}</p>
+
           {!notification.isRead &&
             !selectedNotificationIds.includes(notification.id) && (
               <IconWrapper className="flex justify-end">
@@ -65,7 +64,7 @@ const NotificationItem = ({ notification }: NotificationItemProps) => {
           <div
             className={`text-[#77828C] leading-[120%] text-[12px] w-[360px] ${
               !selectedNotificationIds.includes(notification.id)
-                ? "overflow-hidden whitespace-nowrap text-ellipsis"
+                ? "truncate"
                 : ""
             } `}
           >

src/components/ProfileSetting/ProfileSetting.tsx

@@ -1,6 +1,7 @@
-import CopyIcon from "../../icons/CopyIcon/CopyIcon";
-import IconWrapper from "../../icons/IconWrapper/IconWrapper";
 import IProfile from "../../types/profile";
+import SafetySetting from "../SafetySetting/SafetySetting";
+import ThemeSetting from "../ThemeSetting/ThemeSetting";
+import UserInfoSetting from "../UserInfoSetting/UserInfoSetting";
 
 interface IProfileSettingProps {
   profile: IProfile;
@@ -9,55 +10,9 @@ interface IProfileSettingProps {
 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>
+      <UserInfoSetting profile={profile} />
+      <ThemeSetting />
+      <SafetySetting />
     </div>
   );
 };

src/components/SafetySetting/SafetySetting.tsx

@@ -0,0 +1,41 @@
+import styles from "./styles.module.css";
+
+const SafetySetting = () => {
+  return (
+    <div className="flex gap-6 p-6">
+      <div className="text-[12px] font-semibold font-[#111C26]">
+        Безопасность
+      </div>
+      <div className="flex flex-col w-full gap-3">
+        <div className={styles.inputGroup}>
+          <label htmlFor="inputName" className={styles.label}>
+            Старый пароль
+          </label>
+          <input
+            type="password"
+            className={styles.inputArea}
+            placeholder="placeholder"
+            id="inputName"
+          />
+        </div>
+        <div className={styles.inputGroup}>
+          <label htmlFor="inputName" className={styles.label}>
+            Новый пароль
+          </label>
+          <input
+            placeholder="placeholder"
+            type="password"
+            className={styles.inputArea}
+            id="inputEmail"
+          />
+          <label htmlFor="inputEmail" className={styles.label}></label>
+        </div>
+        <button className="py-2 px-4 bg-[#F0F1F2] w-fit rounded-[8px] text-[#77828C] font-semibold leading-[130%] text-[12px] h-8 cursor-pointer select-none outline-none">
+          Изменить
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SafetySetting;

src/components/SafetySetting/styles.module.css

@@ -0,0 +1,13 @@
+/* Input text form */
+
+.inputGroup {
+  @apply flex flex-col w-full gap-1;
+}
+
+.inputGroup .inputArea {
+  @apply outline-none border-2 border-[#dadce0] py-[10px] px-3 h-[44px] text-sm rounded-[8px];
+}
+
+.inputGroup .label {
+  @apply text-[#8d8d8d] bg-white text-[12px];
+}

src/components/ThemeSetting/ThemeSetting.tsx

@@ -0,0 +1,43 @@
+import styles from "./styles.module.css";
+
+const ThemeSetting = () => {
+  return (
+    <div className="flex gap-6 p-6 border-b border-b-[#DAE0E5]">
+      <div className="text-[12px] font-semibold font-[#111C26]">Тема</div>
+      <div className={styles.checkboxWrapper}>
+        <label>
+          Светлая
+          <input
+            type="radio"
+            className={styles.modernRadio}
+            value="1"
+            name="a"
+          />
+          <span></span>
+        </label>
+        <label>
+          Тёмная
+          <input
+            type="radio"
+            className={styles.modernRadio}
+            value="2"
+            name="a"
+          />
+          <span></span>
+        </label>
+        <label>
+          Как в системе
+          <input
+            type="radio"
+            className={styles.modernRadio}
+            value="2"
+            name="a"
+          />
+          <span></span>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default ThemeSetting;

src/components/ThemeSetting/styles.module.css

@@ -0,0 +1,33 @@
+/* Input radio button */
+
+.checkboxWrapper {
+  @apply flex flex-col gap-2;
+}
+
+.checkboxWrapper input {
+  @apply absolute opacity-0 cursor-pointer;
+}
+
+.checkboxWrapper label {
+  @apply block relative pl-[35px] cursor-pointer text-[12px] select-none;
+}
+
+.checkboxWrapper span {
+  @apply absolute top-0 left-0 h-[18px] w-[18px] bg-[#cccccc] rounded-full;
+}
+
+.checkboxWrapper label input:checked ~ span {
+  @apply bg-[#49a1f5];
+}
+
+.checkboxWrapper span:after {
+  @apply block absolute content-[""];
+}
+
+.checkboxWrapper label input:checked ~ span:after {
+  @apply top-[5px] left-[5px] w-2 h-2 rounded-full bg-white;
+}
+
+.checkboxWrapper label input ~ span:after {
+  @apply top-0.5 left-0.5 w-[14px] h-[14px] rounded-full bg-white;
+}

src/components/UserInfoSetting/UserInfoSetting.tsx

@@ -0,0 +1,60 @@
+import CopyIcon from "../../icons/CopyIcon/CopyIcon";
+import IconWrapper from "../../icons/IconWrapper/IconWrapper";
+import IProfile from "../../types/profile";
+
+interface UserInfoSettingProps {
+  profile: IProfile;
+}
+
+const UserInfoSetting = ({ profile }: UserInfoSettingProps) => {
+  return (
+    <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>
+  );
+};
+
+export default UserInfoSetting;

src/components/UserPanel/UserPanel.tsx

@@ -0,0 +1,88 @@
+import IconWrapper from "../../icons/IconWrapper/IconWrapper";
+import currentProfile from "../../mock/currentUser";
+import Notification from "../../icons/Notification/Notification";
+import Setting from "../../icons/Setting/Setting";
+import Company from "../../icons/Company/Company";
+import Exit from "../../icons/Exit/Exit";
+
+const UserPanel = () => {
+  return (
+    <div className="m-auto">
+      <div className="relative left-[10px] w-0 h-0 border border-x-[6px] border-b-[6px] border-transparent border-b-white"></div>
+      <div className="bg-white w-[240px] h-fit  rounded-[8px]">
+        <div className="flex flex-col py-6 place-items-center gap-4 border-b">
+          <div className="w-[72px] h-[72px]">
+            <img alt={currentProfile.fullname} src={currentProfile.avatar} />
+          </div>
+          <div className="flex flex-col gap-1 place-items-center">
+            <div className="text-[14px] leading-[140%] text-[#111C26]">
+              {currentProfile.fullname}
+            </div>
+            <div className="text-[#77828C] text-[12px] leading-[130%]">
+              {currentProfile.email}
+            </div>
+          </div>
+        </div>
+        <div className="border-b">
+          <div className="flex py-3 cursor-pointer select-none">
+            <div className="flex px-4 gap-2">
+              <div>
+                <IconWrapper className="stroke-[#77828C] h-6 w-6">
+                  <Notification />
+                </IconWrapper>
+              </div>
+              <div className="flex flex-col">
+                <div className="text-sm text-[#111C26] leading-5">
+                  Уведомления
+                </div>
+                <div className="text-[12px] text-[#77828C] leading-4">
+                  4 новых
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex py-3 cursor-pointer select-none">
+            <div className="flex px-4 gap-2">
+              <div>
+                <IconWrapper className="stroke-[#77828C] h-6 w-6">
+                  <Setting />
+                </IconWrapper>
+              </div>
+              <div className="flex flex-col justify-center">
+                <div className="text-sm text-[#111C26] leading-5">
+                  Уведомления
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex py-3 cursor-pointer select-none border-b">
+          <div className="flex px-4 gap-2">
+            <div>
+              <IconWrapper className="stroke-[#77828C] h-6 w-6">
+                <Company />
+              </IconWrapper>
+            </div>
+            <div className="flex flex-col justify-center">
+              <div className="text-sm text-[#111C26] leading-5">Компания</div>
+            </div>
+          </div>
+        </div>
+        <div className="flex py-3 cursor-pointer select-none">
+          <div className="flex px-4 gap-2">
+            <div>
+              <IconWrapper className="stroke-[#77828C] h-6 w-6">
+                <Exit />
+              </IconWrapper>
+            </div>
+            <div className="flex flex-col justify-center">
+              <div className="text-sm text-[#111C26] leading-5">Выход</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserPanel;

src/components/UserSettingModal/UserSettingModal.tsx

@@ -3,10 +3,11 @@ import CrossIcon from "../../icons/CrossIcon/CrossIcon";
 import IconWrapper from "../../icons/IconWrapper/IconWrapper";
 import ProfileSetting from "../ProfileSetting/ProfileSetting";
 import currentProfile from "../../mock/currentUser";
+import UserSettingNotification from "../UserSettingNotification/UserSettingNotification";
 
 const UserSettingModal = () => {
   const [currentTab, setCurrentTab] = useState<"Профиль" | "Уведомления">(
-    "Профиль"
+    "Уведомления"
   );
 
   function handleOnTabClick(tab: "Профиль" | "Уведомления") {
@@ -21,7 +22,7 @@ const UserSettingModal = () => {
   }
 
   return (
-    <div className="bg-white w-[448px] h-[708px] m-auto rounded-[8px]">
+    <div className="bg-white w-[448px] h-fit 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]">
@@ -49,7 +50,11 @@ const UserSettingModal = () => {
           <CrossIcon />
         </IconWrapper>
       </div>
-      <ProfileSetting profile={currentProfile} />
+      {currentTab === "Профиль" ? (
+        <ProfileSetting profile={currentProfile} />
+      ) : (
+        <UserSettingNotification />
+      )}
     </div>
   );
 };

src/components/UserSettingNotification/UserSettingNotification.tsx

@@ -0,0 +1,85 @@
+const UserSettingNotification = () => {
+  return (
+    <div className="flex flex-col ">
+      <div className="flex p-6 gap-4 border-b">
+        <div className="text-[#111C26] text-[12px] font-semibold w-[88px] leading-[130%]">
+          Уведомления в браузере
+        </div>
+        <div className="flex align-middle gap-1">
+          <input
+            defaultChecked
+            type="checkbox"
+            id="browserNotification"
+            name="scales"
+            className="cursor-pointer"
+          />
+          <label
+            htmlFor="browserNotification"
+            className="text-[12px] self-center"
+          >
+            Разрешить уведомления в окне браузера
+          </label>
+        </div>
+      </div>
+      <div className="flex p-6 gap-4">
+        <div className="text-[#111C26] text-[12px] font-semibold w-[88px] leading-[130%]">
+          Уведомления по email
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex align-middle gap-1">
+            <input
+              defaultChecked
+              type="checkbox"
+              id="emailNotificatino"
+              name="scales"
+              className="cursor-pointer"
+            />
+            <label
+              htmlFor="emailNotificatino"
+              className="text-[12px] self-center"
+            >
+              Отправлять уведомления на почтовый адрес
+            </label>
+          </div>
+          <div className="flex flex-col align-middle gap-3">
+            <div className="font-semibold text-[12px]">Виды уведомлений</div>
+            <div className="flex flex-col gap-2">
+              <div className="flex align-middle gap-1">
+                <input
+                  defaultChecked
+                  type="checkbox"
+                  id="emailNotificatino"
+                  name="scales"
+                  className="cursor-pointer"
+                />
+                <label
+                  htmlFor="emailNotificatino"
+                  className="text-[12px] self-center"
+                >
+                  Новые сообщения
+                </label>
+              </div>
+              <div className="flex align-middle gap-1">
+                <input
+                  defaultChecked
+                  type="checkbox"
+                  id="emailNotificatino"
+                  name="scales"
+                  className="cursor-pointer"
+                />
+                <label
+                  htmlFor="emailNotificatino"
+                  className="text-[12px] self-center"
+                >
+                  Системные уведомления
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserSettingNotification;

src/icons/Company/Company.tsx

@@ -0,0 +1,18 @@
+const Company = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M3.75 9C3.75 8.30964 4.30964 7.75 5 7.75H19C19.6904 7.75 20.25 8.30964 20.25 9V18C20.25 18.6904 19.6904 19.25 19 19.25H5C4.30964 19.25 3.75 18.6904 3.75 18V9Z"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M7.89482 6.90002C8.13696 5.99633 8.67053 5.19779 9.41276 4.62825C10.155 4.05871 11.0644 3.75 12 3.75C12.9356 3.75 13.845 4.05871 14.5872 4.62825C15.3295 5.19779 15.863 5.99633 16.1052 6.90002"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Company;

src/icons/CrossIcon/CrossIcon.tsx

@@ -1,8 +1,15 @@
 const CrossIcon = () => {
   return (
-      <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" >
-          <path d="M7.00021 6.99987L12.6572 1.34331M7.00021 6.99987L1.34337 1.34302M7.00021 6.99987L12.6571 12.6567M7.00021 6.99987L1.34326 12.6568" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-      </svg>)
+    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.00021 6.99987L12.6572 1.34331M7.00021 6.99987L1.34337 1.34302M7.00021 6.99987L12.6571 12.6567M7.00021 6.99987L1.34326 12.6568"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
 };
 
 export default CrossIcon;

src/icons/CrossIcon/test.json

@@ -0,0 +1,16 @@
+{
+  "test": {
+    "text": "test",
+    "text3": "test",
+    "text2": "test",
+    "text5": "test",
+    "text6": "test",
+    "text7": "test",
+    "text8": "test",
+    "text9": "test",
+    "text10": "test",
+    "text11": "test",
+    "text12": "test"
+  },
+  "test2": { "test1": "sssssssssssssssssssssssssssss" }
+}

src/icons/Exit/Exit.tsx

@@ -0,0 +1,20 @@
+const Exit = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M15.5 20L7 20C5.89543 20 5 19.1046 5 18L5 6C5 4.89543 5.89543 4 7 4L15.5 4M19 12L8.50016 11.9997M19 12L15.5 15.5556M19 12L15.5 8.44444"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Exit;

src/icons/Notification/Notification.tsx

@@ -0,0 +1,14 @@
+const Notification = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M14.857 17.082L20 17C18.5094 15.3488 17.9967 11.9745 18 9.75V9.05V9C18 7.4087 17.3679 5.88258 16.2426 4.75736C15.1174 3.63214 13.5913 3 12 3C10.4087 3 8.88258 3.63214 7.75736 4.75736C6.63215 5.88258 6 7.4087 6 9V9.75C6.00302 11.9746 5.49099 15.431 4 17.082H9.143M14.857 17.082H9.143M14.857 17.082C15.0011 17.5319 15.0369 18.0094 14.9616 18.4757C14.8862 18.942 14.7018 19.384 14.4234 19.7656C14.1449 20.1472 13.7803 20.4576 13.3592 20.6716C12.9381 20.8856 12.4724 20.9972 12 20.9972C11.5276 20.9972 11.0619 20.8856 10.6408 20.6716C10.2197 20.4576 9.85508 20.1472 9.57662 19.7656C9.29817 19.384 9.11377 18.942 9.03842 18.4757C8.96307 18.0094 8.9989 17.5319 9.143 17.082"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Notification;

src/icons/Setting/Setting.tsx

@@ -0,0 +1,18 @@
+const Setting = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M8 17C9.10457 17 10 16.1046 10 15C10 13.8954 9.10457 13 8 13M8 17C6.89543 17 6 16.1046 6 15C6 13.8954 6.89543 13 8 13M8 17V19M8 13V5"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M16 7C17.1046 7 18 7.89543 18 9C18 10.1046 17.1046 11 16 11M16 7C14.8954 7 14 7.89543 14 9C14 10.1046 14.8954 11 16 11M16 7V5M16 11V19"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default Setting;

src/index.css

@@ -1,8 +1,11 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 body {
+  font-family: "Inter", sans-serif;
   @apply bg-[#ccc];
 }
 

src/types/companyEmployee.ts

@@ -1,6 +1,6 @@
 interface ICompanyEmployee {
     image: string;
-    status: "online" | "offline" | "at demonstration";
+    status: "online" | "offline" | "atDemo";
     name: string;
     id: string;
   }