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