frontend/containers/DashboardEvents/EventCard.tsx (view raw)
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';
10import Box from '@mui/material/Box';
11import Chip from '@mui/material/Chip';
12
13interface Props {
14 event: EventEntity;
15}
16
17const EventCard = ({event}: Props) => {
18 const {t} = useTranslation();
19 const isCarosterPlusEvent =
20 event?.attributes.enabled_modules?.includes('caroster-plus');
21
22 return (
23 <Card
24 sx={{
25 cursor: 'pointer',
26 }}
27 onClick={() =>
28 router.push(`/e/${event.attributes.uuid}`, undefined, {shallow: true})
29 }
30 >
31 <CardContent sx={{pb: 0}}>
32 <Box
33 display="flex"
34 alignItems="baseline"
35 justifyContent="space-between"
36 >
37 <Typography
38 gutterBottom
39 variant="subtitle1"
40 sx={{
41 whiteSpace: 'nowrap',
42 textOverflow: 'ellipsis',
43 overflow: 'hidden',
44 }}
45 >
46 {event.attributes.name}
47 </Typography>
48 {isCarosterPlusEvent && (
49 <Chip label="Plus" size="small" variant="outlined" />
50 )}
51 </Box>
52 <Typography
53 variant="overline"
54 sx={{color: 'GrayText', display: 'block', mt: 2}}
55 >
56 {t('event.fields.date')}
57 </Typography>
58 <Typography variant="body1" sx={{mb: 1}}>
59 {moment(event.attributes.date).format('DD/MM/YYYY') ||
60 t('event.fields.empty')}
61 </Typography>
62 <Typography
63 variant="overline"
64 sx={{color: 'GrayText', display: 'block', mt: 2}}
65 >
66 {t('event.fields.address')}
67 </Typography>
68 <Typography
69 variant="body1"
70 sx={{
71 mb: 1,
72 whiteSpace: 'nowrap',
73 overflow: 'hidden',
74 textOverflow: 'ellipsis',
75 }}
76 >
77 {event.attributes.address || t('event.fields.empty')}
78 </Typography>
79 </CardContent>
80 <CardActions sx={{px: 2}}>
81 <Button sx={{p: 0}} color="primary">
82 {t('dashboard.actions.see_event')}
83 </Button>
84 </CardActions>
85 </Card>
86 );
87};
88
89export default EventCard;