<iman> update all promotion

2 files changed, 33 insertions, 8 deletions

diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx
index 16cb7647..05bf1e11 100644
--- a/src-migrate/modules/promo/components/FlashSale.tsx
+++ b/src-migrate/modules/promo/components/FlashSale.tsx
@@ -12,7 +12,7 @@ const FlashSale = dynamic(
   const FlashSalePromo = ()=> {
     return(
         <>  
-            <h1 className='text-h-sm md:text-h-lg  font-semibold'>Bayar Setengahnya!</h1>
+            <h1 className='h-4'></h1>
             <FlashSale/>
         </>
     )
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.tsx
index e6add893..42725034 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -1,16 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { Button, Skeleton } from '@chakra-ui/react'
 import clsxm from "~/libs/clsxm"
-import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
+import ProductPromoCard from '../../product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
 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 '@/core/components/elements/Link/Link'
+import Link from "next/link"
+import { IPromotion } from '~/types/promotion';
+interface PromoListProps {
+  selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
+}
 
-const PromoList = ({ selectedPromo }) => {
+const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
   const {
     title,
     slug,
@@ -24,7 +28,16 @@ const PromoList = ({ selectedPromo }) => {
     setIsLoading,
   } = usePromoStore();
 
-  const { isMobile } = useDevice();
+  const { isMobile, isDesktop } = useDevice();
+
+  const swiperBanner = {
+    modules: [Navigation],
+    className: 'h-[400px] w-full',
+    slidesPerView: isMobile ? 1.1 : 3.25,
+    spaceBetween: 10,
+    navigation:isMobile? true : false,
+    allowTouchMove:isMobile? false : true,
+  };
 
   useEffect(() => {
     if (selectedPromo === 'Bundling') {
@@ -96,11 +109,23 @@ const PromoList = ({ selectedPromo }) => {
           "min-h-[340px]": promoData[0] && promoData?.length > 0
         })}
       >
-        {promoData?.map((promotion) => (
+        {isDesktop && (
+                    <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>
+        )}
+        {isMobile && (promoData?.map((promotion: IPromotion) => (
           <div key={promotion.id} className="min-w-[400px] max-w-[400px]">
             <ProductPromoCard promotion={promotion}  />
           </div>
-        ))}
+        )))}
+        
       </Skeleton>
       )}
     </div>