1import {useTranslation} from 'next-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;