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