diff --git a/public/profile.png b/public/profile.png new file mode 100644 index 0000000..fe2381e Binary files /dev/null and b/public/profile.png differ diff --git a/src/App.tsx b/src/App.tsx index 15dd700..2edd2b0 100644 --- a/src/App.tsx +++ b/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() {
{/* */} {/* */} +
); } diff --git a/src/components/ProfileSetting/ProfileSetting.tsx b/src/components/ProfileSetting/ProfileSetting.tsx new file mode 100644 index 0000000..d924963 --- /dev/null +++ b/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 ( +
+
+
+ {profile.fullname} +
+
+
+
+
Имя
+
{profile.fullname}
+
+ + + +
+
+
+
Email
+
{profile.email}
+
+ + + +
+
+
+
Телефон
+
{profile.phone}
+
+ + + +
+
+
+
Должность
+
{profile.jobTitle}
+
+ + + +
+ +
+
+
+
Тема
+
+
+ ); +}; + +export default ProfileSetting; diff --git a/src/components/UserSettingModal/UserSettingModal.tsx b/src/components/UserSettingModal/UserSettingModal.tsx new file mode 100644 index 0000000..674b8e8 --- /dev/null +++ b/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 ( +
+
+
+
+ + +
+
+ + + +
+ +
+ ); +}; + +export default UserSettingModal; diff --git a/src/mock/currentUser.ts b/src/mock/currentUser.ts new file mode 100644 index 0000000..f355229 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/types/profile.ts b/src/types/profile.ts new file mode 100644 index 0000000..54a5c0e --- /dev/null +++ b/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; \ No newline at end of file