94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { User } from '@/lib/account.types';
|
|
// import { setPicture } from "@/api/users";
|
|
import { Menu, UnstyledButton, Group, Avatar, Card, FileButton, Grid, Button, Text } from '@mantine/core';
|
|
import { useNavigate } from 'react-router';
|
|
// import './styles.css';
|
|
|
|
interface HeaderUserProps {
|
|
user: User;
|
|
profilePicture: File | undefined;
|
|
logout: () => Promise<void>;
|
|
}
|
|
|
|
export default function HeaderUser({ user, profilePicture, logout }: HeaderUserProps) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Menu shadow='md' width={200} openDelay={100} closeDelay={400} zIndex={1000}>
|
|
<Menu.Target>
|
|
<UnstyledButton>
|
|
<Group>
|
|
<Avatar src={profilePicture ? URL.createObjectURL(profilePicture) : undefined} />
|
|
<div tabIndex={-1} style={{ flex: 1, userSelect: 'none' }}>
|
|
<Text size='sm' fw={500}>
|
|
{user.firstName} {user.lastName}
|
|
</Text>
|
|
<Text c='dimmed' size='xs' style={{ textTransform: 'uppercase' }}>
|
|
{user.role}
|
|
</Text>
|
|
</div>
|
|
</Group>
|
|
</UnstyledButton>
|
|
</Menu.Target>
|
|
<Menu.Dropdown p={0}>
|
|
<Card>
|
|
<Card.Section h={140} style={{ backgroundColor: '#4481e3' }} />
|
|
<FileButton
|
|
onChange={(payload) => {
|
|
if (payload) {
|
|
// TODO profile picture
|
|
// setPicture(payload).then((response: any) => {
|
|
// if (response) {
|
|
//
|
|
// }
|
|
// });
|
|
}
|
|
}}
|
|
accept='image/png,image/jpeg,image/svg+xml,image/webp,image/gif,image/apng,image/avif'
|
|
multiple={false}
|
|
>
|
|
{(props) => (
|
|
<Avatar
|
|
{...props}
|
|
component='button'
|
|
size={80}
|
|
radius={80}
|
|
mx={'auto'}
|
|
mt={-30}
|
|
style={{ cursor: 'pointer' }}
|
|
bg={profilePicture ? 'transparent' : 'white'}
|
|
src={profilePicture ? URL.createObjectURL(profilePicture) : undefined}
|
|
/>
|
|
)}
|
|
</FileButton>
|
|
<Text ta='center' fz='lg' fw={500} mt='sm'>
|
|
{user.firstName} {user.lastName}
|
|
</Text>
|
|
<Text ta='center' fz='sm' c='dimmed' style={{ textTransform: 'uppercase' }}>
|
|
{user.role}
|
|
</Text>
|
|
<Grid mt='xl'>
|
|
<Grid.Col span={6}>
|
|
<Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/profile')}>
|
|
Profile
|
|
</Button>
|
|
</Grid.Col>
|
|
<Grid.Col span={6}>
|
|
<Button fullWidth radius='md' size='xs' variant='default' onClick={logout}>
|
|
Logout
|
|
</Button>
|
|
</Grid.Col>
|
|
{user.role == 'ADMIN' && (
|
|
<Grid.Col span={12}>
|
|
<Button fullWidth radius='md' size='xs' variant='default' onClick={() => navigate('/administration')}>
|
|
Administration
|
|
</Button>
|
|
</Grid.Col>
|
|
)}
|
|
</Grid>
|
|
</Card>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
}
|