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 'react-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 && moment(event.attributes.date).format('DD/MM/YYYY') ||
60            t('event.fields.empty')}
61        </Typography>
62        <Typography
63          variant="overline"
64          sx={{color: 'GrayText', display: 'block', mt: 2}}
65        >
66          {t('event.fields.address')}
67        </Typography>
68        <Typography
69          variant="body1"
70          sx={{
71            mb: 1,
72            whiteSpace: 'nowrap',
73            overflow: 'hidden',
74            textOverflow: 'ellipsis',
75          }}
76        >
77          {event.attributes.address || t('event.fields.empty')}
78        </Typography>
79      </CardContent>
80      <CardActions sx={{px: 2}}>
81        <Button sx={{p: 0}} color="primary">
82          {t('dashboard.actions.see_event')}
83        </Button>
84      </CardActions>
85    </Card>
86  );
87};
88
89export default EventCard;