100 lines
2.7 KiB
TypeScript
100 lines
2.7 KiB
TypeScript
import { cn } from "@/utils/class-merge";
|
||
import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
|
||
import { FunctionComponent, h } from "preact";
|
||
import { useLocation } from "preact-iso";
|
||
import { tv } from "tailwind-variants";
|
||
import classes from "./menu.module.scss";
|
||
|
||
interface MenuItemProps {
|
||
title: string;
|
||
link: string;
|
||
icon: h.JSX.Element;
|
||
}
|
||
|
||
const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuItemProps) => {
|
||
const { route, path } = useLocation();
|
||
const active = path === link;
|
||
const menuItemClasses = tv({
|
||
base: classes.menu_item,
|
||
variants: {
|
||
activity: {
|
||
active: "bg-gray-200",
|
||
inactive: "bg-white",
|
||
},
|
||
},
|
||
defaultVariants: {
|
||
activity: "inactive",
|
||
},
|
||
});
|
||
return (
|
||
<div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => route(link, true)}>
|
||
{icon}
|
||
<div class="hidden md:block">{title}</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Avatar: FunctionComponent = () => {
|
||
const { route, path } = useLocation();
|
||
//TODO: Move styles to scss module
|
||
return (
|
||
<button
|
||
onClick={() => route("/profile/settings")}
|
||
class={cn("hidden h-32 w-full cursor-pointer overflow-hidden opacity-100 transition-[height,opacity] md:block", {
|
||
"h-0 opacity-0": path === "/profile/settings",
|
||
})}
|
||
>
|
||
<div
|
||
class={cn(
|
||
"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"
|
||
)}
|
||
>
|
||
<div class="my-5 aspect-square h-full rounded-full bg-white"></div>
|
||
<div class="flex flex-col items-center justify-center">
|
||
<p class="text-3xl font-semibold">никнейм</p>
|
||
<div class="rounded-[1rem] bg-white px-5 leading-5 font-light italic">статус</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
);
|
||
};
|
||
|
||
interface MenuItems {
|
||
title: string;
|
||
link: string;
|
||
icon: h.JSX.Element;
|
||
}
|
||
|
||
const Menu: FunctionComponent = () => {
|
||
//TODO: Move links to enum
|
||
const menu_items: MenuItems[] = [
|
||
{
|
||
title: "Задачи",
|
||
link: "/profile/tasks",
|
||
icon: <ListBulletIcon class="size-10" />,
|
||
},
|
||
{
|
||
title: "Календарь",
|
||
link: "/profile/calendar",
|
||
icon: <CalendarDaysIcon class="size-10" />,
|
||
},
|
||
{
|
||
title: "Профиль",
|
||
link: "/profile/settings",
|
||
icon: <UserIcon class="size-10" />,
|
||
},
|
||
];
|
||
return (
|
||
<div id={classes.container}>
|
||
<Avatar />
|
||
<div class={classes.menu_container}>
|
||
{menu_items.map(({ title, link, icon }) => (
|
||
<MenuItem title={title} link={link} icon={icon} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Menu;
|