1import React from 'react';
 2import Grid from '@mui/material/Grid';
 3import Typography from '@mui/material/Typography';
 4import Box from '@mui/material/Box';
 5import EventCard from './EventCard';
 6import { EventEntity } from '../../generated/graphql';
 7
 8interface Props {
 9  label: string;
10  events: EventEntity[];
11}
12
13const Section = (props: Props) => {
14  const {label, events} = props;
15  return (
16    <Box mb={8}>
17      <Typography gutterBottom variant="h6" component="h3">
18        {label}
19      </Typography>
20      <Grid container spacing={4}>
21        {events.map(event => (
22          <Grid item xs={12} md={3} lg={4} key={event.id}>
23            <EventCard event={event} />
24          </Grid>
25        ))}
26      </Grid>
27    </Box>
28  );
29};
30
31export default Section;