import Carousel from "react-multi-carousel" ; import "react-multi-carousel/lib/styles.css" ; import { Class } from "../../typings/interfaces" ; import { shuffle } from "../../utils" ; import BookLoader from "../sections/BookLoader" ; import ClassItem from "./ClassItem" ; const ClassGallery = ( { classes , loading } ) => { const responsive = { desktop : { breakpoint : { max : 3000 , min : 1024 } , items : 3 , slidesToSlide : 3 , } , tablet : { breakpoint : { max : 1024 , min : 464 } , items : 2 , slidesToSlide : 2 , } , mobile : { breakpoint : { max : 464 , min : 0 } , items : 1 , slidesToSlide : 1 , } , } ; return ( < > { loading ? ( < div className = "mx-auto py-12 px-4 sm:px-6 lg:px-8 text-center" key = "gallery-loader" > < BookLoader /> < /div>) : ( < Carousel swipeable = { true } draggable = { false } showDots = { true } responsive = { responsive } ssr = { true } infinite = { true } autoPlay = { false } autoPlaySpeed = { 1000 } keyBoardControl = { true } customTransition = "all .5" transitionDuration = { 500 } containerClass = "carousel-container" removeArrowOnDeviceType = { [ "tablet" , "mobile" ] } dotListClass = "custom-dot-list-style focus:outline-none focus:border-0 text-fuchsia-500 focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500" itemClass = "carousel-item-padding-40-px p-6 " className = "mb-6" > { shuffle ( classes ) ?. slice ( 0 , 9 ) . map ( ( _class , idx ) => { return ( < ClassItem _class = { _class } idx = { idx } data - attr = "class-item" / > ) ; } ) ?? [ ] } < /Carousel>)} < />); } ; export default ClassGallery ;