1import React 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";
 7
 8const settings = {
 9  dots: false,
10  infinite: false,
11  speed: 500,
12  slidesToShow: 5,
13  slidesToScroll: 1,
14  arrows: false,
15  lazyLoad: true,
16  swipeToSlide: true,
17  swipe: true,
18  responsive: [
19    {
20      breakpoint: 600,
21      settings: {
22        slidesToShow: 1,
23      },
24    },
25  ],
26};
27
28const CarColumns = ({ cars = [] }) => {
29  const classes = useStyles();
30  return (
31    <div>
32      <Slider {...settings}>
33        {cars.map((car) => (
34          <Container key={car.id} maxWidth="sm" className={classes.slide}>
35            <Car car={car} />
36          </Container>
37        ))}
38        <Container maxWidth="sm" className={classes.slide}>
39          <AddCar />
40        </Container>
41      </Slider>
42    </div>
43  );
44};
45
46const useStyles = makeStyles((theme) => ({
47  slide: {
48    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
49    outline: "none",
50    padding: theme.spacing(2),
51  },
52}));
53
54export default CarColumns;