1import router from 'next/router';
 2import moment from 'moment';
 3import Card from '@mui/material/Card';
 4import CardActions from '@mui/material/CardActions';
 5import CardContent from '@mui/material/CardContent';
 6import Typography from '@mui/material/Typography';
 7import Button from '@mui/material/Button';
 8import {useTranslation} from 'next-i18next';
 9import {EventEntity} from '../../generated/graphql';
10import Box from '@mui/material/Box';
11import Chip from '@mui/material/Chip';
12
13interface Props {
14  event: EventEntity;
15}
16
17const EventCard = ({event}: Props) => {
18  const {t} = useTranslation();
19  const isCarosterPlusEvent =
20    event?.attributes.enabled_modules?.includes('caroster-plus');
21
22  return (
23    <Card
24      sx={{
25        cursor: 'pointer',
26      }}
27      onClick={() =>
28        router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
29      }
30    >
31      <CardContent sx={{pb: 0}}>
32        <Box
33          display="flex"
34          alignItems="baseline"
35          justifyContent="space-between"
36        >
37          <Typography
38            gutterBottom
39            variant="subtitle1"
40            sx={{
41              whiteSpace: 'nowrap',
42              textOverflow: 'ellipsis',
43              overflow: 'hidden',
44            }}
45          >
46            {event.attributes.name}
47          </Typography>
48          {isCarosterPlusEvent && (
49            <Chip label="Plus" size="small" variant="outlined" />
50          )}
51        </Box>
52        <Typography
53          variant="overline"
54          sx={{color: 'GrayText', display: 'block', mt: 2}}
55        >
56          {t('event.fields.date')}
57        </Typography>
58        <Typography variant="body1" sx={{mb: 1}}>
59          {(event.attributes.date &&
60            moment(event.attributes.date).format('DD/MM/YYYY')) ||
61            t('event.fields.empty')}
62        </Typography>
63        <Typography
64          variant="overline"
65          sx={{color: 'GrayText', display: 'block', mt: 2}}
66        >
67          {t('event.fields.address')}
68        </Typography>
69        <Typography
70          variant="body1"
71          sx={{
72            mb: 1,
73            whiteSpace: 'nowrap',
74            overflow: 'hidden',
75            textOverflow: 'ellipsis',
76          }}
77        >
78          {event.attributes.address || t('event.fields.empty')}
79        </Typography>
80      </CardContent>
81      <CardActions sx={{px: 2}}>
82        <Button sx={{p: 0}} color="primary">
83          {t('dashboard.actions.see_event')}
84        </Button>
85      </CardActions>
86    </Card>
87  );
88};
89
90export default EventCard;