1import router from 'next/router';
 2import Card from '@material-ui/core/Card';
 3import CardActions from '@material-ui/core/CardActions';
 4import CardContent from '@material-ui/core/CardContent';
 5import Typography from '@material-ui/core/Typography';
 6import Button from '@material-ui/core/Button';
 7import {makeStyles} from '@material-ui/styles';
 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  const classes = useStyles();
18
19  return (
20    <Card
21      className={classes.clickable}
22      onClick={() =>
23        router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
24      }
25    >
26      <CardContent>
27        <Typography
28          gutterBottom
29          variant="h6"
30          component="h3"
31          className={classes.name}
32        >
33          {event.attributes.name}
34        </Typography>
35        <Typography variant="overline">{t('event.fields.date')}</Typography>
36        <Typography variant="body2" gutterBottom>
37          {event.attributes.date || t('event.fields.empty')}
38        </Typography>
39        <Typography variant="overline">{t('event.fields.address')}</Typography>
40        <Typography variant="body2" gutterBottom>
41          {event.attributes.address || t('event.fields.empty')}
42        </Typography>
43      </CardContent>
44      <CardActions>
45        <Button color="primary">{t('dashboard.actions.see_event')}</Button>
46      </CardActions>
47    </Card>
48  );
49};
50
51const useStyles = makeStyles({
52  clickable: {
53    cursor: 'pointer',
54  },
55  name: {
56    whiteSpace: 'nowrap',
57    textOverflow: 'ellipsis',
58    overflow: 'hidden',
59  },
60});
61export default EventCard;