diff --git a/src/assets/status/1.png b/src/assets/status/1.png new file mode 100644 index 0000000..6fee9a6 Binary files /dev/null and b/src/assets/status/1.png differ diff --git a/src/assets/status/2.png b/src/assets/status/2.png new file mode 100644 index 0000000..410ae68 Binary files /dev/null and b/src/assets/status/2.png differ diff --git a/src/assets/status/3.png b/src/assets/status/3.png new file mode 100644 index 0000000..44f900d Binary files /dev/null and b/src/assets/status/3.png differ diff --git a/src/assets/status/4.png b/src/assets/status/4.png new file mode 100644 index 0000000..50c9f4d Binary files /dev/null and b/src/assets/status/4.png differ diff --git a/src/assets/status/5.png b/src/assets/status/5.png new file mode 100644 index 0000000..1ef70c4 Binary files /dev/null and b/src/assets/status/5.png differ diff --git a/src/components/menu.tsx b/src/components/menu.tsx index 3805237..7dfbd76 100644 --- a/src/components/menu.tsx +++ b/src/components/menu.tsx @@ -1,5 +1,6 @@ import { useAppContext } from "@/providers/AuthProvider"; import apiClient from "@/services/api"; +import { getAvatarPicUrl } from "@/services/avatar-pic"; import { cn } from "@/utils/class-merge"; import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid"; import { FunctionComponent, h } from "preact"; @@ -84,7 +85,9 @@ const Avatar: FunctionComponent = () => { "h-full flex-row items-center justify-around rounded-[3rem] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex" )} > -
+
+ avatar +

{username}

{status}
diff --git a/src/pages/profile_settings.module.scss b/src/pages/profile_settings.module.scss index ddabb3a..d1f2b4d 100644 --- a/src/pages/profile_settings.module.scss +++ b/src/pages/profile_settings.module.scss @@ -5,7 +5,7 @@ } #avatar { - @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full bg-white; + @apply flex aspect-square h-[7rem] flex-col items-center justify-center rounded-full; } .profile_container { diff --git a/src/pages/profile_settings.tsx b/src/pages/profile_settings.tsx index fad400f..3c22c30 100644 --- a/src/pages/profile_settings.tsx +++ b/src/pages/profile_settings.tsx @@ -4,6 +4,7 @@ import { withTitle } from "@/constructors/Component"; import { UrlsTitle } from "@/enums/urls"; import { useAppContext } from "@/providers/AuthProvider"; import apiClient from "@/services/api"; +import { getAvatarPicUrl } from "@/services/avatar-pic"; import { cn } from "@/utils/class-merge"; import { ArrowRightStartOnRectangleIcon, Cog8ToothIcon } from "@heroicons/react/24/outline"; import { FunctionComponent } from "preact"; @@ -72,7 +73,9 @@ const ProfileSettings: FunctionComponent = () => {
-
"Аватар"
+
+ avatar +

{userData.username}

{userData.status}

diff --git a/src/services/avatar-pic.ts b/src/services/avatar-pic.ts new file mode 100644 index 0000000..b1c62ef --- /dev/null +++ b/src/services/avatar-pic.ts @@ -0,0 +1,21 @@ +import Status1 from "@/assets/status/1.png"; +import Status2 from "@/assets/status/2.png"; +import Status3 from "@/assets/status/3.png"; +import Status4 from "@/assets/status/4.png"; +import Status5 from "@/assets/status/5.png"; +export const getAvatarPicUrl = (status: string) => { + switch (true) { + case status.includes("точно"): + return Status1; + case status.includes("плана нет"): + return Status2; + case status.includes("прокрастинации"): + return Status3; + case status.includes("3000"): + return Status4; + case status.includes("планирования"): + return Status5; + default: + return Status1; + } +};