1import React, { useMemo } from "react";
 2import Slider from "react-slick";
 3import Container from "@material-ui/core/Container";
 4import { makeStyles } from "@material-ui/core/styles";
 5import Car from "./Car";
 6import AddCar from "./AddCar";
 7import { useEvent } from "../../contexts/Event";
 8import { useStrapi } from "strapi-react-context";
 9
10const settings = {
11  dots: false,
12  infinite: false,
13  speed: 500,
14  slidesToShow: 5,
15  slidesToScroll: 1,
16  arrows: false,
17  lazyLoad: true,
18  swipeToSlide: true,
19  swipe: true,
20  responsive: [
21    {
22      breakpoint: 600,
23      settings: {
24        slidesToShow: 1,
25      },
26    },
27  ],
28};
29
30const CarColumns = ({ ...props }) => {
31  const classes = useStyles();
32  const strapi = useStrapi();
33  const { event } = useEvent();
34
35  const cars = useMemo(
36    () => strapi.stores.cars?.filter((car) => car?.event?.id === event?.id),
37    [strapi.stores.cars, event]
38  );
39
40  return (
41    <div>
42      <Slider {...settings}>
43        {cars &&
44          cars.map((car) => (
45            <Container key={car.id} maxWidth="sm" className={classes.slide}>
46              <Car car={car} {...props} />
47            </Container>
48          ))}
49        <Container maxWidth="sm" className={classes.slide}>
50          <AddCar {...props} />
51        </Container>
52      </Slider>
53    </div>
54  );
55};
56
57const useStyles = makeStyles((theme) => ({
58  slide: {
59    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
60    outline: "none",
61    padding: theme.spacing(2),
62  },
63}));
64
65export default CarColumns;