66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { Key } from 'react';
|
|
import {
|
|
Icon,
|
|
Button,
|
|
MenuTrigger,
|
|
Popover,
|
|
Menu,
|
|
MenuItem,
|
|
MenuSeparator,
|
|
MenuSection,
|
|
Text,
|
|
} from '@umami/react-zen';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useMessages, useLoginQuery } from '@/components/hooks';
|
|
import { LogOut, Settings, UserCircle, LockKeyhole } from '@/components/icons';
|
|
|
|
export function ProfileButton() {
|
|
const { formatMessage, labels } = useMessages();
|
|
const { user } = useLoginQuery();
|
|
const router = useRouter();
|
|
const cloudMode = !!process.env.cloudMode;
|
|
|
|
const handleSelect = (key: Key) => {
|
|
router.push(`/${key}`);
|
|
};
|
|
|
|
return (
|
|
<MenuTrigger>
|
|
<Button data-test="button-profile" variant="quiet">
|
|
<Icon>
|
|
<UserCircle />
|
|
</Icon>
|
|
</Button>
|
|
<Popover placement="bottom end">
|
|
<Menu autoFocus="last" onAction={handleSelect}>
|
|
<MenuSection title={user.username}>
|
|
<MenuSeparator />
|
|
<MenuItem id="settings">
|
|
<Icon>
|
|
<Settings />
|
|
</Icon>
|
|
<Text>{formatMessage(labels.settings)}</Text>
|
|
</MenuItem>
|
|
{user.isAdmin && (
|
|
<MenuItem id="admin">
|
|
<Icon>
|
|
<LockKeyhole />
|
|
</Icon>
|
|
<Text>{formatMessage(labels.admin)}</Text>
|
|
</MenuItem>
|
|
)}
|
|
{!cloudMode && (
|
|
<MenuItem data-test="item-logout" id="logout">
|
|
<Icon>
|
|
<LogOut />
|
|
</Icon>
|
|
<Text>{formatMessage(labels.logout)}</Text>
|
|
</MenuItem>
|
|
)}
|
|
</MenuSection>
|
|
</Menu>
|
|
</Popover>
|
|
</MenuTrigger>
|
|
);
|
|
}
|