umami/components/input/ProfileButton.js
2023-03-21 21:28:36 -07:00

54 lines
1.5 KiB
JavaScript

import { Icon, Button, PopupTrigger, Popup, Menu, Item, Text } from 'react-basics';
import { useRouter } from 'next/router';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import styles from './ProfileButton.module.css';
export default function ProfileButton() {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const router = useRouter();
const handleSelect = key => {
if (key === 'profile') {
router.push('/settings/profile');
}
if (key === 'logout') {
router.push('/logout');
}
};
return (
<PopupTrigger>
<Button variant="quiet">
<Icon>
<Icons.Profile />
</Icon>
<Icon size="sm">
<Icons.ChevronDown />
</Icon>
</Button>
<Popup position="bottom" alignment="end">
<Menu variant="popup" onSelect={handleSelect} className={styles.menu}>
<Item key="user" className={styles.item}>
<Text>{user.username}</Text>
</Item>
<Item key="profile" className={styles.item} divider={true}>
<Icon>
<Icons.User />
</Icon>
<Text>{formatMessage(labels.profile)}</Text>
</Item>
<Item key="logout" className={styles.item}>
<Icon>
<Icons.Logout />
</Icon>
<Text>{formatMessage(labels.logout)}</Text>
</Item>
</Menu>
</Popup>
</PopupTrigger>
);
}