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';
10
11interface Props {
12  event: EventEntity;
13}
14
15const EventCard = ({event}: Props) => {
16  const {t} = useTranslation();
17
18  return (
19    <Card
20      sx={{
21        cursor: 'pointer'
22      }}
23      onClick={() =>
24        router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
25      }
26    >
27      <CardContent sx={{pb: 0}}>
28        <Typography
29          gutterBottom
30          variant="subtitle1"
31          sx={{
32            whiteSpace: 'nowrap',
33            textOverflow: 'ellipsis',
34            overflow: 'hidden',
35          }}
36        >
37          {event.attributes.name}
38        </Typography>
39        <Typography
40          variant="overline"
41          sx={{color: 'GrayText', display: 'block', mt: 2}}
42        >
43          {t('event.fields.date')}
44        </Typography>
45        <Typography variant="body1" sx={{mb: 1}}>
46          {moment(event.attributes.date).format('DD/MM/YYYY') ||
47            t('event.fields.empty')}
48        </Typography>
49        <Typography
50          variant="overline"
51          sx={{color: 'GrayText', display: 'block', mt: 2}}
52        >
53          {t('event.fields.address')}
54        </Typography>
55        <Typography
56          variant="body1"
57          sx={{
58            mb: 1,
59            whiteSpace: 'nowrap',
60            overflow: 'hidden',
61            textOverflow: 'ellipsis',
62          }}
63        >
64          {event.attributes.address || t('event.fields.empty')}
65        </Typography>
66      </CardContent>
67      <CardActions sx={{px: 2,}}>
68        <Button sx={{p: 0}} color="primary">
69          {t('dashboard.actions.see_event')}
70        </Button>
71      </CardActions>
72    </Card>
73  );
74};
75
76export default EventCard;