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 Typography from '@material-ui/core/Typography';
const DashboardSection = ({children}) => (
{children}
);
const Dashboard = ({futureEvents, noDateEvents, pastEvents}) => {
const classes = useStyles();
const {t} = useTranslation();
const cardsForEvents = events =>
events.map(event => (
));
return (
{futureEvents.length + noDateEvents.length > 0 && (
<>
{t('dashboard.sections.future', {
count: futureEvents.length + noDateEvents.length,
})}
{cardsForEvents(futureEvents)}
{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 Dashboard;