frontend/containers/EventBar/index.tsx (view raw)
1import {useState} from 'react';
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/styles';
10import useShare from '../../hooks/useShare';
11import GenericMenu from '../GenericMenu';
12import useActions from './useActions';
13import UserIcon from './UserIcon';
14import {useSession} from 'next-auth/react';
15import DrawerNotification from '../DrawerNotification';
16
17const EventBar = ({event, onAdd, goBack, title}) => {
18 const session = useSession();
19 const isAuthenticated = session.status === 'authenticated';
20 const theme = useTheme();
21 const {share} = useShare();
22 const [anchorEl, setAnchorEl] = useState(null);
23
24 const menuActions = useActions({onAdd, eventId: event?.id});
25
26 return (
27 <AppBar
28 sx={{
29 top: 0,
30 right: 0,
31 width: '100%',
32 overflow: 'hidden',
33 minHeight: theme.mixins.toolbar.minHeight,
34 transition: 'height 0.3s ease',
35 backgroundColor: 'transparent',
36 backgroundImage: `linear-gradient(${theme.palette.background.grey} 0%, rgba(0,0,0,0) 90%)`,
37 }}
38 position="absolute"
39 elevation={0}
40 id="Menu"
41 >
42 <Toolbar>
43 <Box
44 sx={{
45 flexGrow: 1,
46 display: 'flex',
47 justifyContent: 'space-start',
48 pl: 0,
49 pr: 1,
50 }}
51 >
52 {goBack && (
53 <IconButton
54 sx={{color: 'inherit'}}
55 edge="start"
56 onClick={goBack}
57 size="large"
58 >
59 <Icon>chevron_left</Icon>
60 </IconButton>
61 )}
62 <Tooltip title={title || event.name || ''}>
63 <Typography
64 variant="h6"
65 noWrap
66 sx={{maxWidth: `calc(100vw - ${theme.spacing(18)})`, my: 2}}
67 >
68 {title || event.name}
69 </Typography>
70 </Tooltip>
71 </Box>
72 <>
73 <IconButton
74 sx={{marginRight: 0}}
75 color="inherit"
76 edge="end"
77 id="ShareBtn"
78 onClick={() =>
79 share({
80 title: `Caroster ${event.name}`,
81 })
82 }
83 size="large"
84 >
85 <Icon>share</Icon>
86 </IconButton>
87 {isAuthenticated && <DrawerNotification />}
88 <IconButton
89 color="inherit"
90 edge="end"
91 id="MenuMoreInfo"
92 onClick={e => setAnchorEl(e.currentTarget)}
93 size="large"
94 >
95 <UserIcon />
96 </IconButton>
97 <GenericMenu
98 anchorEl={anchorEl}
99 setAnchorEl={setAnchorEl}
100 actions={menuActions}
101 />
102 </>
103 </Toolbar>
104 </AppBar>
105 );
106};
107
108export default EventBar;