1import React from 'react';
 2import Grid from '@mui/material/GridLegacy';
 3import Typography from '@mui/material/Typography';
 4import Box from '@mui/material/Box';
 5import EventCard from './EventCard';
 6import {EventEntity} from '../../generated/graphql';
 7import theme from '../../theme';
 8
 9interface Props {
10  label: string;
11  events: EventEntity[];
12}
13
14const Section = (props: Props) => {
15  const {label, events} = props;
16
17  return (
18    <Box
19      mb={6}
20      sx={{
21        px: 1,
22        [theme.breakpoints.down('md')]: {
23          px: 0,
24        },
25      }}
26    >
27      <Typography
28        gutterBottom
29        variant="subtitle2"
30        component="h3"
31        color="GrayText"
32        sx={{pb: 1}}
33      >
34        {label}
35      </Typography>
36      <Grid container spacing={3}>
37        {events.map(event => (
38          <Grid item xs={12} sm={4} lg={3} key={event.id}>
39            <EventCard event={event} />
40          </Grid>
41        ))}
42      </Grid>
43    </Box>
44  );
45};
46
47export default Section;