frontend/containers/DashboardEvents/EventCard.tsx (view raw)
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;