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