1import {useTranslation} from 'react-i18next';
 2import Box from '@mui/material/Box';
 3import Section from './Section';
 4import { EventEntity } from '../../generated/graphql';
 5
 6const DashboardEvents = ({
 7  futureEvents = [],
 8  noDateEvents = [],
 9  pastEvents = [],
10}: {
11  futureEvents: EventEntity[];
12  noDateEvents: EventEntity[];
13  pastEvents: EventEntity[];
14}) => {
15  const {t} = useTranslation();
16
17  return (
18    <Box p={4}>
19      {futureEvents.length > 0 && (
20        <Section
21          label={t('dashboard.sections.future', {
22            count: futureEvents.length,
23          })}
24          events={futureEvents}
25        />
26      )}
27      {noDateEvents.length > 0 && (
28        <Section
29          label={t('dashboard.sections.noDate', {
30            count: noDateEvents.length,
31          })}
32          events={noDateEvents}
33        />
34      )}
35      {pastEvents.length > 0 && (
36        <Section
37          label={t('dashboard.sections.past', {
38            count: pastEvents.length,
39          })}
40          events={pastEvents}
41        />
42      )}
43    </Box>
44  );
45};
46
47export default DashboardEvents;