CarouselPopulerCar.tsx

import { dataPopuler } from "@/pages/api/data";
import CardPopulerCar from "./CardPopulerCar";
import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
// Default theme
import '@splidejs/react-splide/css';

// or other themes
// import '@splidejs/react-splide/css/skyblue';
// import '@splidejs/react-splide/css/sea-green';

// // or only core styles
// import '@splidejs/react-splide/css/core';

function CarouselPopulerCar() {

    return (
        <Splide
            options={{
                padding: '60px',
                rewind: true,
                gap: '1rem',
                start: 3,
                perPage: 1,
                mediaQuery: 'min',
                breakpoints: {
                    600: {
                        perPage: 1,
                        padding: '60px',
                    },
                    // 800: {
                    //     perPage: 2,
                    //     padding: '55px',
                    // },
                    // 1000: {
                    //     perPage: 3,
                    //     padding: '50px',
                    // },
                    // 1200: {
                    //     perPage: 3,
                    //     padding: '55px',
                    // },
                    // 1600: {
                    //     perPage: 4,
                    //     padding: '60px',
                    // },
                    // 2000: {
                    //     perPage: 5,
                    //     padding: '60px',
                    // }
                }
            }}
        >
            {dataPopuler.map((item) => (
                <SplideSlide key={item.id}>
                    <div className="mx-auto">
                        <CardPopulerCar title={item.title} button={`/detailCar/${item.id}`} type={item.type} img={item.img} tank={item.tank} gear={item.gear} seat={item.seat} price={item.price} />
                    </div>
                </SplideSlide>
            ))}
        </Splide>
    );
}

export default CarouselPopulerCar;