mirror of https://github.com/renzynx/bliss.git
118 lines
2.3 KiB
TypeScript
118 lines
2.3 KiB
TypeScript
import { ROUTES } from '@lib/constants';
|
|
import { useSignOut } from '@lib/hooks';
|
|
import { IMenuProps, SessionUser } from '@lib/types';
|
|
import { Avatar, Indicator, Kbd, Menu, Text } from '@mantine/core';
|
|
import { getHotkeyHandler } from '@mantine/hooks';
|
|
import { IconLogout, IconSettings, IconUser } from '@tabler/icons';
|
|
import router from 'next/router';
|
|
import { useMemo } from 'react';
|
|
|
|
const menu_items: IMenuProps[] = [
|
|
{
|
|
href: ROUTES.SETTINGS,
|
|
text: 'Settings',
|
|
icon: <IconSettings size={20} />,
|
|
right_section: <Kbd>S</Kbd>,
|
|
},
|
|
{
|
|
href: ROUTES.PROFILE,
|
|
text: 'Profile',
|
|
icon: <IconUser size={20} />,
|
|
right_section: <Kbd>P</Kbd>,
|
|
},
|
|
{
|
|
href: '/logout',
|
|
text: 'Logout',
|
|
icon: <IconLogout size={20} />,
|
|
right_section: <Kbd>L</Kbd>,
|
|
},
|
|
];
|
|
const MenuItem = ({ href, text, icon, right_section }: IMenuProps) => {
|
|
const { signOut } = useSignOut();
|
|
|
|
return (
|
|
<Menu.Item
|
|
onClick={async () => {
|
|
href === '/logout' ? signOut() : router.push(href);
|
|
}}
|
|
icon={icon}
|
|
rightSection={right_section}
|
|
>
|
|
<Text size="sm">{text}</Text>
|
|
</Menu.Item>
|
|
);
|
|
};
|
|
|
|
const UserMenu = ({ user }: { user: SessionUser }) => {
|
|
const { signOut } = useSignOut();
|
|
const items = useMemo(() => {
|
|
return menu_items.map(({ href, text, icon, right_section }, idx) => {
|
|
return (
|
|
<MenuItem
|
|
key={idx}
|
|
href={href}
|
|
text={text}
|
|
icon={icon}
|
|
right_section={right_section}
|
|
/>
|
|
);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<Menu
|
|
shadow="md"
|
|
position="bottom-end"
|
|
transition="rotate-right"
|
|
width={170}
|
|
>
|
|
<Menu.Target>
|
|
<Indicator
|
|
dot={true}
|
|
inline={true}
|
|
offset={4}
|
|
size={11}
|
|
position="top-start"
|
|
color="green"
|
|
withBorder={true}
|
|
>
|
|
<Avatar
|
|
sx={{ cursor: 'pointer', boxShadow: '0 0 0 0.1px #FFFFFF' }}
|
|
radius="xl"
|
|
src={user.image}
|
|
alt="User Avatar"
|
|
/>
|
|
</Indicator>
|
|
</Menu.Target>
|
|
|
|
<Menu.Dropdown
|
|
onKeyDown={getHotkeyHandler([
|
|
[
|
|
'P',
|
|
() => {
|
|
router.push(ROUTES.PROFILE);
|
|
},
|
|
],
|
|
[
|
|
'S',
|
|
() => {
|
|
router.push(ROUTES.SETTINGS);
|
|
},
|
|
],
|
|
[
|
|
'L',
|
|
async () => {
|
|
await signOut();
|
|
},
|
|
],
|
|
])}
|
|
>
|
|
<Menu.Label>{user.username}</Menu.Label>
|
|
{items}
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default UserMenu;
|