1import {useTranslation} from 'next-i18next';
 2import Box from '@mui/material/Box';
 3import Section from './Section';
 4import {EventEntity} from '../../generated/graphql';
 5import theme from '../../theme';
 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
18  return (
19    <Box
20      sx={{
21        px: 4,
22        pb: 4,
23        [theme.breakpoints.down('md')]: {
24          px: 2,
25        },
26      }}
27    >
28      {futureEvents.length > 0 && (
29        <Section
30          label={t('dashboard.sections.future', {
31            count: futureEvents.length,
32          })}
33          events={futureEvents}
34        />
35      )}
36      {noDateEvents.length > 0 && (
37        <Section
38          label={t('dashboard.sections.noDate', {
39            count: noDateEvents.length,
40          })}
41          events={noDateEvents}
42        />
43      )}
44      {pastEvents.length > 0 && (
45        <Section
46          label={t('dashboard.sections.past', {
47            count: pastEvents.length,
48          })}
49          events={pastEvents}
50        />
51      )}
52    </Box>
53  );
54};
55
56export default DashboardEvents;