98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
import Logo from '../assets/logo.png';
|
|
import { Avatar, createStyles, Header, Group, rem, UnstyledButton, Title, ActionIcon, Tooltip } from '@mantine/core';
|
|
import SwitchToggle from './toggle-colorscheme';
|
|
import { IconUserCheck, IconUserOff } from '@tabler/icons-react';
|
|
import { logout, useAuth } from '../tools/auth-provider';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
header: {
|
|
paddingLeft: theme.spacing.md,
|
|
paddingRight: theme.spacing.md,
|
|
},
|
|
|
|
inner: {
|
|
height: rem(56),
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
|
|
links: {
|
|
[theme.fn.smallerThan('md')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
|
|
search: {
|
|
[theme.fn.smallerThan('xs')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
|
|
link: {
|
|
display: 'block',
|
|
lineHeight: 1,
|
|
padding: `${rem(8)} ${rem(12)}`,
|
|
borderRadius: theme.radius.sm,
|
|
textDecoration: 'none',
|
|
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
|
|
fontSize: theme.fontSizes.sm,
|
|
fontWeight: 500,
|
|
|
|
'&:hover': {
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
|
|
},
|
|
},
|
|
}));
|
|
|
|
const links = [
|
|
{ label: 'Playlists', link: '/playlists' },
|
|
{ label: 'Files', link: '/files' },
|
|
{ label: 'Planning', link: '/planning' },
|
|
{ label: 'Users', link: '/users' },
|
|
];
|
|
|
|
const HeaderSearch = () => {
|
|
const { classes } = useStyles();
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const items = links.map((link) => (
|
|
<UnstyledButton key={link.label} className={classes.link} onClick={() => navigate(link.link)}>
|
|
<Title order={4}>{link.label}</Title>
|
|
</UnstyledButton>
|
|
));
|
|
|
|
return (
|
|
<Header height={56} className={classes.header}>
|
|
<div className={classes.inner}>
|
|
<Group>
|
|
<Avatar src={Logo} size={30} />
|
|
<UnstyledButton onClick={() => navigate('/')} className={classes.link}>
|
|
<Title order={1}>Artemio</Title>
|
|
</UnstyledButton>
|
|
</Group>
|
|
|
|
<Group>
|
|
<Group ml={50} spacing={5} className={classes.links}>
|
|
{items}
|
|
</Group>
|
|
<SwitchToggle />
|
|
<Tooltip label={user ? 'Logout' : 'Connect'} withArrow>
|
|
<ActionIcon variant="light" size="lg" onClick={logout}>
|
|
{user ? (
|
|
<IconUserCheck size="1.2rem" stroke={1.5} />
|
|
) : (
|
|
<IconUserOff size="1.2rem" stroke={1.5} />
|
|
)}
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</Group>
|
|
</div>
|
|
</Header>
|
|
);
|
|
};
|
|
|
|
export default HeaderSearch;
|