{"size": 953, "ext": "js", "max_stars_repo_path": "packages/boba/gateway/src/components/carousel/Carousel.js", "max_stars_repo_name": "zukoboba/optimism-v2", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/boba/gateway/src/components/carousel/Carousel.js", "max_issues_repo_name": "zukoboba/optimism-v2", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/boba/gateway/src/components/carousel/Carousel.js", "max_forks_repo_name": "zukoboba/optimism-v2", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.2765957447, "max_line_length": 56, "alphanum_fraction": 0.592864638}
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import React from 'react';
import { Box } from '@material-ui/core';
import * as styles from './Carousel.module.scss'

const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 7
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 6
  },
  tablet: {
    breakpoint: { max: 1024, min: 580 },
    items: 3
  },
  mobile: {
    breakpoint: { max: 580, min: 0 },
    items: 2
  }
}

function CAROUSEL({
  children
}) {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Carousel
        showDots={true}
        keyBoardControl={true}
        responsive={responsive}
        removeArrowOnDeviceType={[ "tablet", "mobile" ]}
        className={styles.multiCarousel}
      >
        {children}
      </Carousel>
    </Box>
  );

}

export default React.memo(CAROUSEL)
