1 files changed, 40 insertions, 52 deletions

diff --git a/src-migrate/modules/promo/components/PromoList.tsx b/src-migrate/modules/promo/components/PromoList.jsx
index 1b359857..e6add893 100644
--- a/src-migrate/modules/promo/components/PromoList.tsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,23 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import ProductPromoCard from '../../product-promo/components/Card';
+import { Button, Skeleton } from '@chakra-ui/react'
+import clsxm from "~/libs/clsxm"
+import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
-import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import useDevice from '@/core/hooks/useDevice';
 import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
 import usePromoStore from './promoStore';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import Link from "next/link"
-import SwiperCore, { Navigation, Pagination } from 'swiper';
-import { IPromotion } from '~/types/promotion';
+import Link from '@/core/components/elements/Link/Link'
 
-SwiperCore.use([Navigation, Pagination]);
-
-interface PromoListProps {
-  selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
-}
-
-const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
-  const { isMobile } = useDevice();
+const PromoList = ({ selectedPromo }) => {
   const {
     title,
     slug,
@@ -30,8 +23,9 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
     setPromoData,
     setIsLoading,
   } = usePromoStore();
-  
-  
+
+  const { isMobile } = useDevice();
+
   useEffect(() => {
     if (selectedPromo === 'Bundling') {
       setTitle('Kombinasi Kilat Pilihan Kami!');
@@ -49,7 +43,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
     const fetchPromotions = async () => {
       setIsLoading(true);
       try {
-        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10);
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); 
         setPromoItems(items);
 
         const promoDataPromises = items.map(async (item) => {
@@ -60,7 +54,7 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
             return [];
           }
         });
-        
+
         const promoDataArray = await Promise.all(promoDataPromises);
         const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
         setPromoData(mergedPromoData);
@@ -79,44 +73,38 @@ const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
       fetchPromotions();
     }
   }, [slug, setPromoItems, setPromoData, setIsLoading]);
-  
-  const swiperBanner: SwiperProps = {
-    modules: [Navigation],
-    className: 'h-[400px] w-full',
-    slidesPerView: isMobile ? 1.1 : 3.25,
-    spaceBetween: 10,
-    navigation:isMobile? true : false,
-    allowTouchMove:isMobile? false : true,
-  };
+
   return (
-    <>
-      <div className='min-h-[360px]'>
-        <div className='flex justify-between items-center'>
-          <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
-          <div>
-            <Link href={`/shop/promo/${slug}`} className='!text-red-500 font-semibold'>
-              Lihat Semua
-            </Link>
-          </div>
+    <div className='min-h-[360px]'>
+      <div className='flex justify-between  items-center'>
+        <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
+        <div>
+          <Link href={`/shop/promo/${slug}`} className='!text-red-500 font-semibold'>
+            Lihat Semua
+          </Link>
         </div>
-        {isLoading ? (
-          <div className="loading-spinner flex justify-center">
-            <LogoSpinner width={48} height={48} />
-          </div>
-        ) : (
-          <Swiper {...swiperBanner}>
-            {promoData?.map((promotion: IPromotion) => (
-              <SwiperSlide key={promotion.id}>
-                <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full">
-                  <ProductPromoCard promotion={promotion} />
-                </div>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        )}
       </div>
-    </>
+      {isLoading ? (
+        <div className="loading-spinner flex justify-center">
+          <LogoSpinner width={48} height={48} />
+        </div>
+      ) : (
+        <Skeleton
+        isLoaded={!isLoading}
+        className={clsxm(
+          "flex gap-x-4 overflow-x-auto px-4 md:px-0", {
+          "min-h-[340px]": promoData[0] && promoData?.length > 0
+        })}
+      >
+        {promoData?.map((promotion) => (
+          <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
+            <ProductPromoCard promotion={promotion}  />
+          </div>
+        ))}
+      </Skeleton>
+      )}
+    </div>
   );
 };
 
-export default PromoList;
+export default PromoList;
\ No newline at end of file