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>
28        <Typography
29          gutterBottom
30          variant="h6"
31          component="h3"
32          sx={{
33            whiteSpace: 'nowrap',
34            textOverflow: 'ellipsis',
35            overflow: 'hidden',
36          }}
37        >
38          {event.attributes.name}
39        </Typography>
40        <Typography variant="overline">{t('event.fields.date')}</Typography>
41        <Typography variant="body2" gutterBottom>
42          {moment(event.attributes.date).format('DD/MM/YYYY') ||
43            t('event.fields.empty')}
44        </Typography>
45        <Typography variant="overline">{t('event.fields.address')}</Typography>
46        <Typography variant="body2" gutterBottom>
47          {event.attributes.address || t('event.fields.empty')}
48        </Typography>
49      </CardContent>
50      <CardActions>
51        <Button sx={{p: 0}} color="primary">
52          {t('dashboard.actions.see_event')}
53        </Button>
54      </CardActions>
55    </Card>
56  );
57};
58
59export default EventCard;