frontend/containers/EventBar/index.tsx (view raw)
1import Link from 'next/link';
2import AppBar from '@mui/material/AppBar';
3import Toolbar from '@mui/material/Toolbar';
4import Typography from '@mui/material/Typography';
5import IconButton from '@mui/material/IconButton';
6import Tooltip from '@mui/material/Tooltip';
7import Icon from '@mui/material/Icon';
8import Box from '@mui/material/Box';
9import {useTheme} from '@mui/material/styles';
10import {useState} from 'react';
11import useProfile from '../../hooks/useProfile';
12import useShare from '../../hooks/useShare';
13import GenericMenu from '../GenericMenu';
14import useActions from './useActions';
15import UserIcon from './UserIcon';
16
17const EventBar = ({event, onAdd}) => {
18 const {share} = useShare();
19 const theme = useTheme();
20 const [anchorEl, setAnchorEl] = useState(null);
21 const {connected} = useProfile();
22
23 const menuActions = useActions({onAdd, eventId: event?.id});
24 const appLink = connected ? '/dashboard' : `/e/${event.uuid}` || '';
25
26 return (
27 <AppBar
28 sx={{
29 overflow: 'hidden',
30 minHeight: theme.mixins.toolbar.minHeight,
31 overflowY: 'hidden',
32 transition: 'height 0.3s ease',
33 backgroundColor: '#242424',
34 color: 'white',
35 }}
36 color="primary"
37 position="static"
38 id="Menu"
39 >
40 <Toolbar>
41 <Box sx={{flexGrow: 1, display: 'flex', alignItems: 'center'}}>
42 <Link href={appLink}>
43 <Box
44 sx={{
45 marginRight: theme.spacing(2),
46 width: 64,
47 height: 32,
48 cursor: 'pointer',
49 }}
50 >
51 <img src="/assets/Logo_in_beta.svg" alt="Logo" />
52 </Box>
53 </Link>
54 <Tooltip title={event.name || ''}>
55 <Typography
56 variant="h6"
57 noWrap
58 id="MenuHeaderTitle"
59 sx={{maxWidth: `calc(100vw - ${theme.spacing(30)})`}}
60 >
61 {event.name}
62 </Typography>
63 </Tooltip>
64 </Box>
65 <>
66 <IconButton
67 sx={{marginRight: 0}}
68 color="inherit"
69 edge="end"
70 id="ShareBtn"
71 onClick={() =>
72 share({
73 title: `Caroster ${event.name}`,
74 })
75 }
76 size="large"
77 >
78 <Icon>share</Icon>
79 </IconButton>
80 <GenericMenu
81 anchorEl={anchorEl}
82 setAnchorEl={setAnchorEl}
83 actions={menuActions}
84 />
85 <IconButton
86 color="inherit"
87 edge="end"
88 id="MenuMoreInfo"
89 onClick={e => setAnchorEl(e.currentTarget)}
90 size="large"
91 >
92 <UserIcon />
93 </IconButton>
94 </>
95 </Toolbar>
96 </AppBar>
97 );
98};
99
100export default EventBar;