frontend/containers/DashboardEvents/Section.tsx (view raw)
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;