frontend/containers/DashboardEvents/EventCard.tsx (view raw)
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 gutterBottom variant="h6" component="h3">
28 {event.attributes.name}
29 </Typography>
30 <Typography variant="overline">{t('event.fields.date')}</Typography>
31 <Typography variant="body2" gutterBottom>
32 {event.attributes.date || t('event.fields.empty')}
33 </Typography>
34 <Typography variant="overline">{t('event.fields.address')}</Typography>
35 <Typography variant="body2" gutterBottom>
36 {event.attributes.address || t('event.fields.empty')}
37 </Typography>
38 </CardContent>
39 <CardActions>
40 <Button color="primary">{t('dashboard.actions.see_event')}</Button>
41 </CardActions>
42 </Card>
43 );
44};
45
46const useStyles = makeStyles({
47 clickable: {
48 cursor: 'pointer',
49 },
50});
51export default EventCard;