1import router from 'next/router';
 2import { styled } from '@mui/material/styles';
 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
11const PREFIX = 'EventCard';
12
13const classes = {
14  clickable: `${PREFIX}-clickable`,
15  name: `${PREFIX}-name`
16};
17
18const StyledCard = styled(Card)({
19  [`&.${classes.clickable}`]: {
20    cursor: 'pointer',
21  },
22  [`& .${classes.name}`]: {
23    whiteSpace: 'nowrap',
24    textOverflow: 'ellipsis',
25    overflow: 'hidden',
26  },
27});
28
29interface Props {
30  event: EventEntity;
31}
32
33const EventCard = ({event}: Props) => {
34  const {t} = useTranslation();
35
36
37  return (
38    <StyledCard
39      className={classes.clickable}
40      onClick={() =>
41        router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
42      }
43    >
44      <CardContent>
45        <Typography
46          gutterBottom
47          variant="h6"
48          component="h3"
49          className={classes.name}
50        >
51          {event.attributes.name}
52        </Typography>
53        <Typography variant="overline">{t('event.fields.date')}</Typography>
54        <Typography variant="body2" gutterBottom>
55          {event.attributes.date || t('event.fields.empty')}
56        </Typography>
57        <Typography variant="overline">{t('event.fields.address')}</Typography>
58        <Typography variant="body2" gutterBottom>
59          {event.attributes.address || t('event.fields.empty')}
60        </Typography>
61      </CardContent>
62      <CardActions>
63        <Button color="primary">{t('dashboard.actions.see_event')}</Button>
64      </CardActions>
65    </StyledCard>
66  );
67};
68
69export default EventCard;