diff --git a/src/App.tsx b/src/App.tsx index 2edd2b0..d51005f 100644 --- a/src/App.tsx +++ b/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 (
- {/* */} - {/* */} + + +
); } diff --git a/src/components/CompanyInfoModal/CompanyInfoModal.tsx b/src/components/CompanyInfoModal/CompanyInfoModal.tsx index 7f17545..7030545 100644 --- a/src/components/CompanyInfoModal/CompanyInfoModal.tsx +++ b/src/components/CompanyInfoModal/CompanyInfoModal.tsx @@ -23,7 +23,7 @@ const companyEmployeeItems: ICompanyEmployee[] = [ }, { name: "Анастасия Кошкина", - status: "at demonstration", + status: "atDemo", image: "Employee.png", id: "3", }, diff --git a/src/components/EmployeeItem/EmployeeItem.tsx b/src/components/EmployeeItem/EmployeeItem.tsx index 181c5b7..aa6196f 100644 --- a/src/components/EmployeeItem/EmployeeItem.tsx +++ b/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 (
{name}
{name}
-
- • {statusColor[status].label} +
+ • {label}
diff --git a/src/components/NotificationItem/NotificationItem.tsx b/src/components/NotificationItem/NotificationItem.tsx index 5eabbea..263982d 100644 --- a/src/components/NotificationItem/NotificationItem.tsx +++ b/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) => { )} -
-
-
-

{notification.title}

-
+
+
+

{notification.title}

+ {!notification.isRead && !selectedNotificationIds.includes(notification.id) && ( @@ -65,7 +64,7 @@ const NotificationItem = ({ notification }: NotificationItemProps) => {
diff --git a/src/components/ProfileSetting/ProfileSetting.tsx b/src/components/ProfileSetting/ProfileSetting.tsx index d924963..c609840 100644 --- a/src/components/ProfileSetting/ProfileSetting.tsx +++ b/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 (
-
-
- {profile.fullname} -
-
-
-
-
Имя
-
{profile.fullname}
-
- - - -
-
-
-
Email
-
{profile.email}
-
- - - -
-
-
-
Телефон
-
{profile.phone}
-
- - - -
-
-
-
Должность
-
{profile.jobTitle}
-
- - - -
- -
-
-
-
Тема
-
+ + +
); }; diff --git a/src/components/SafetySetting/SafetySetting.tsx b/src/components/SafetySetting/SafetySetting.tsx new file mode 100644 index 0000000..d9a174a --- /dev/null +++ b/src/components/SafetySetting/SafetySetting.tsx @@ -0,0 +1,41 @@ +import styles from "./styles.module.css"; + +const SafetySetting = () => { + return ( +
+
+ Безопасность +
+
+
+ + +
+
+ + + +
+ +
+
+ ); +}; + +export default SafetySetting; diff --git a/src/components/SafetySetting/styles.module.css b/src/components/SafetySetting/styles.module.css new file mode 100644 index 0000000..1ee5629 --- /dev/null +++ b/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]; +} diff --git a/src/components/ThemeSetting/ThemeSetting.tsx b/src/components/ThemeSetting/ThemeSetting.tsx new file mode 100644 index 0000000..753ae87 --- /dev/null +++ b/src/components/ThemeSetting/ThemeSetting.tsx @@ -0,0 +1,43 @@ +import styles from "./styles.module.css"; + +const ThemeSetting = () => { + return ( +
+
Тема
+
+ + + +
+
+ ); +}; + +export default ThemeSetting; diff --git a/src/components/ThemeSetting/styles.module.css b/src/components/ThemeSetting/styles.module.css new file mode 100644 index 0000000..cccd4e3 --- /dev/null +++ b/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; +} diff --git a/src/components/UserInfoSetting/UserInfoSetting.tsx b/src/components/UserInfoSetting/UserInfoSetting.tsx new file mode 100644 index 0000000..a39de1c --- /dev/null +++ b/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 ( +
+
+ {profile.fullname} +
+
+
+
+
Имя
+
{profile.fullname}
+
+ + + +
+
+
+
Email
+
{profile.email}
+
+ + + +
+
+
+
Телефон
+
{profile.phone}
+
+ + + +
+
+
+
Должность
+
{profile.jobTitle}
+
+ + + +
+ +
+
+ ); +}; + +export default UserInfoSetting; diff --git a/src/components/UserPanel/UserPanel.tsx b/src/components/UserPanel/UserPanel.tsx new file mode 100644 index 0000000..ffbbd4a --- /dev/null +++ b/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 ( +
+
+
+
+
+ {currentProfile.fullname} +
+
+
+ {currentProfile.fullname} +
+
+ {currentProfile.email} +
+
+
+
+
+
+
+ + + +
+
+
+ Уведомления +
+
+ 4 новых +
+
+
+
+
+
+
+ + + +
+
+
+ Уведомления +
+
+
+
+
+
+
+
+ + + +
+
+
Компания
+
+
+
+
+
+
+ + + +
+
+
Выход
+
+
+
+
+
+ ); +}; + +export default UserPanel; diff --git a/src/components/UserSettingModal/UserSettingModal.tsx b/src/components/UserSettingModal/UserSettingModal.tsx index 674b8e8..c74dda7 100644 --- a/src/components/UserSettingModal/UserSettingModal.tsx +++ b/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 ( -
+
@@ -49,7 +50,11 @@ const UserSettingModal = () => {
- + {currentTab === "Профиль" ? ( + + ) : ( + + )}
); }; diff --git a/src/components/UserSettingNotification/UserSettingNotification.tsx b/src/components/UserSettingNotification/UserSettingNotification.tsx new file mode 100644 index 0000000..7db7aea --- /dev/null +++ b/src/components/UserSettingNotification/UserSettingNotification.tsx @@ -0,0 +1,85 @@ +const UserSettingNotification = () => { + return ( +
+
+
+ Уведомления в браузере +
+
+ + +
+
+
+
+ Уведомления по email +
+
+
+ + +
+
+
Виды уведомлений
+
+
+ + +
+
+ + +
+
+
+
+
+
+ ); +}; + +export default UserSettingNotification; diff --git a/src/icons/Company/Company.tsx b/src/icons/Company/Company.tsx new file mode 100644 index 0000000..1bc0948 --- /dev/null +++ b/src/icons/Company/Company.tsx @@ -0,0 +1,18 @@ +const Company = () => { + return ( + + + + + ); +}; + +export default Company; diff --git a/src/icons/CrossIcon/CrossIcon.tsx b/src/icons/CrossIcon/CrossIcon.tsx index ff9b4a9..8a5cc23 100644 --- a/src/icons/CrossIcon/CrossIcon.tsx +++ b/src/icons/CrossIcon/CrossIcon.tsx @@ -1,8 +1,15 @@ const CrossIcon = () => { return ( - - - ) + + + + ); }; export default CrossIcon; diff --git a/src/icons/CrossIcon/test.json b/src/icons/CrossIcon/test.json new file mode 100644 index 0000000..c0b4989 --- /dev/null +++ b/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" } +} diff --git a/src/icons/Exit/Exit.tsx b/src/icons/Exit/Exit.tsx new file mode 100644 index 0000000..a2b2ec0 --- /dev/null +++ b/src/icons/Exit/Exit.tsx @@ -0,0 +1,20 @@ +const Exit = () => { + return ( + + + + ); +}; + +export default Exit; diff --git a/src/icons/Notification/Notification.tsx b/src/icons/Notification/Notification.tsx new file mode 100644 index 0000000..a46a40e --- /dev/null +++ b/src/icons/Notification/Notification.tsx @@ -0,0 +1,14 @@ +const Notification = () => { + return ( + + + + ); +}; + +export default Notification; diff --git a/src/icons/Setting/Setting.tsx b/src/icons/Setting/Setting.tsx new file mode 100644 index 0000000..6c02178 --- /dev/null +++ b/src/icons/Setting/Setting.tsx @@ -0,0 +1,18 @@ +const Setting = () => { + return ( + + + + + ); +}; + +export default Setting; diff --git a/src/index.css b/src/index.css index e14d34e..de961fa 100644 --- a/src/index.css +++ b/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]; } diff --git a/src/types/companyEmployee.ts b/src/types/companyEmployee.ts index 3ae1648..ab07dbd 100644 --- a/src/types/companyEmployee.ts +++ b/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; }