frontend/containers/DashboardEvents/index.tsx (view raw)
1import {useTranslation} from 'react-i18next';
2import Box from '@mui/material/Box';
3import Section from './Section';
4import {EventEntity} from '../../generated/graphql';
5import {useTheme} from '@mui/styles';
6
7const DashboardEvents = ({
8 futureEvents = [],
9 noDateEvents = [],
10 pastEvents = [],
11}: {
12 futureEvents: EventEntity[];
13 noDateEvents: EventEntity[];
14 pastEvents: EventEntity[];
15}) => {
16 const {t} = useTranslation();
17 const theme = useTheme();
18
19 return (
20 <Box
21 sx={{
22 px: 4,
23 pb: 4,
24 [theme.breakpoints.down('md')]: {
25 px: 2,
26 },
27 }}
28 >
29 {futureEvents.length > 0 && (
30 <Section
31 label={t('dashboard.sections.future', {
32 count: futureEvents.length,
33 })}
34 events={futureEvents}
35 />
36 )}
37 {noDateEvents.length > 0 && (
38 <Section
39 label={t('dashboard.sections.noDate', {
40 count: noDateEvents.length,
41 })}
42 events={noDateEvents}
43 />
44 )}
45 {pastEvents.length > 0 && (
46 <Section
47 label={t('dashboard.sections.past', {
48 count: pastEvents.length,
49 })}
50 events={pastEvents}
51 />
52 )}
53 </Box>
54 );
55};
56
57export default DashboardEvents;