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