umami/components/input/ProfileButton.js

62 lines
1.8 KiB
JavaScript
Raw Normal View History

2023-03-22 05:28:36 +01:00
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';
2023-04-07 05:34:02 +02:00
import useConfig from 'hooks/useConfig';
2023-03-22 05:28:36 +01:00
import styles from './ProfileButton.module.css';
import useLocale from 'hooks/useLocale';
2023-03-22 05:28:36 +01:00
2023-04-21 17:00:42 +02:00
export function ProfileButton() {
2023-03-22 05:28:36 +01:00
const { formatMessage, labels } = useMessages();
const { user } = useUser();
2023-04-07 05:34:02 +02:00
const { cloudMode } = useConfig();
2023-03-22 05:28:36 +01:00
const router = useRouter();
const { dir } = useLocale();
2023-03-22 05:28:36 +01:00
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={dir === 'rtl' ? 'start' : 'end'}>
2023-03-22 05:28:36 +01:00
<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>
2023-04-07 05:34:02 +02:00
{!cloudMode && (
<Item key="logout" className={styles.item}>
<Icon>
<Icons.Logout />
</Icon>
<Text>{formatMessage(labels.logout)}</Text>
</Item>
)}
2023-03-22 05:28:36 +01:00
</Menu>
</Popup>
</PopupTrigger>
);
}
2023-04-21 17:00:42 +02:00
export default ProfileButton;