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 DrawerNotification from '../DrawerNotification';
15import useProfile from '../../hooks/useProfile';
16import {Chip} from '@mui/material';
17
18const EventBar = ({event, onAdd, goBack, title}) => {
19 const {connected} = useProfile();
20 const theme = useTheme();
21 const {share} = useShare();
22 const [anchorEl, setAnchorEl] = useState(null);
23 const menuActions = useActions({onAdd, eventId: event?.id});
24 const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
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 flexGrow={1}
45 display="flex"
46 justifyContent="space-start"
47 pr={1}
48 gap={1}
49 >
50 {goBack && (
51 <IconButton
52 sx={{color: 'inherit'}}
53 edge="start"
54 onClick={goBack}
55 size="large"
56 >
57 <Icon>chevron_left</Icon>
58 </IconButton>
59 )}
60 <Tooltip title={title || event.name || ''}>
61 <Typography
62 variant="h6"
63 noWrap
64 sx={{maxWidth: `calc(100vw - ${theme.spacing(18)})`}}
65 >
66 {title || event.name}
67 </Typography>
68 </Tooltip>
69 {isCarosterPlusEvent && (
70 <Chip
71 label="Plus"
72 size="small"
73 variant="outlined"
74 sx={{color: 'white', borderColor: 'white'}}
75 />
76 )}
77 </Box>
78 <>
79 <IconButton
80 sx={{marginRight: 0}}
81 color="inherit"
82 edge="end"
83 id="ShareBtn"
84 onClick={() =>
85 share({
86 title: `Caroster ${event.name}`,
87 })
88 }
89 size="large"
90 >
91 <Icon>share</Icon>
92 </IconButton>
93 {connected && <DrawerNotification />}
94 <IconButton
95 color="inherit"
96 edge="end"
97 id="MenuMoreInfo"
98 onClick={e => setAnchorEl(e.currentTarget)}
99 size="large"
100 >
101 <UserIcon />
102 </IconButton>
103 <GenericMenu
104 anchorEl={anchorEl}
105 setAnchorEl={setAnchorEl}
106 actions={menuActions}
107 />
108 </>
109 </Toolbar>
110 </AppBar>
111 );
112};
113
114export default EventBar;