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