frontend/containers/EventMarker/EventPopup.tsx (view raw)
1import moment from 'moment';
2import Card from '@mui/material/Card';
3import Typography from '@mui/material/Typography';
4import Link from '@mui/material/Link';
5import Box from '@mui/material/Box';
6import {useTranslation} from 'react-i18next';
7import {Popup} from 'react-leaflet';
8import getMapsLink from '../../lib/getMapsLink';
9import {Event} from '../../generated/graphql';
10
11interface Props {
12 event: Event & {id: string};
13}
14
15const EventPopup = ({event}: Props) => {
16 const {t} = useTranslation();
17
18 return (
19 <Popup>
20 <Card sx={{p: 2, width: '350px', maxWidth: '100%'}}>
21 <Box>
22 <Typography
23 variant="h3"
24 color="primary"
25 sx={{cursor: 'pointer', display: 'inline-block'}}
26 >
27 <Link
28 color="inherit"
29 href={`/e/${event.uuid}/details`}
30 sx={{textDecoration: 'none'}}
31 >
32 {event.name}
33 </Link>
34 </Typography>
35 </Box>
36 {!!event.date && (
37 <Box sx={{marginTop: 2}}>
38 <Typography variant="overline" color="GrayText">
39 {t('event.fields.date')}
40 </Typography>
41 <Typography variant="body1">
42 {moment(event.date).format('LL')}
43 </Typography>
44 </Box>
45 )}
46 {!!event.address && (
47 <Box sx={{marginTop: 2}}>
48 <Typography variant="overline" color="GrayText">
49 {t('event.fields.address')}
50 </Typography>
51 <Typography variant="body1" color="primary">
52 <Link
53 component="a"
54 target="_blank"
55 rel="noopener noreferrer"
56 href={getMapsLink(event.address)}
57 sx={{color: 'primary.main'}}
58 >
59 {event.address}
60 </Link>
61 </Typography>
62 </Box>
63 )}
64 </Card>
65 </Popup>
66 );
67};
68export default EventPopup;