import React from 'react';
import Grid from '@material-ui/core/Grid';
import {makeStyles} from '@material-ui/core/styles';
import {useTranslation} from 'react-i18next';
import EventCard from './EventCard';
import Section from './Section';
const cardsForEvents = events =>
events.map(event => (
));
const DashboardEvents = ({futureEvents, noDateEvents, pastEvents}) => {
const classes = useStyles();
const {t} = useTranslation();
return (
{futureEvents.length > 0 && (
<>
{t('dashboard.sections.future', {
count: futureEvents.length,
})}
{cardsForEvents(futureEvents)}
>
)}
{noDateEvents.length > 0 && (
<>
{t('dashboard.sections.noDate', {
count: noDateEvents.length,
})}
{cardsForEvents(noDateEvents)}
>
)}
{pastEvents.length > 0 && (
<>
{t('dashboard.sections.past', {count: pastEvents.length})}
{cardsForEvents(pastEvents)}
>
)}
);
};
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
maxWidth: '90rem',
width: '100%',
margin: '0 auto',
},
}));
export default DashboardEvents;