<iman? update promotion-program add swiper

1 files changed, 19 insertions, 21 deletions

diff --git a/src/pages/shop/promo/[slug].tsx b/src/pages/shop/promo/[slug].tsx
index be5a715d..a2b790ca 100644
--- a/src/pages/shop/promo/[slug].tsx
+++ b/src/pages/shop/promo/[slug].tsx
@@ -9,6 +9,9 @@ import ProductPromoCard from '../../../../src-migrate/modules/product-promo/comp
 import { IPromotion } from '../../../../src-migrate/types/promotion'
 import React from 'react'
 import { SolrResponse } from "../../../../src-migrate/types/solr.ts";
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import useDevice from '../../../core/hooks/useDevice'
 
 const BasicLayout = dynamic(() => import('../../../core/components/layouts/BasicLayout'))
 
@@ -21,10 +24,9 @@ export default function PromoDetail() {
   const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman
   const startIndex = (currentPage - 1) * itemsPerPage;
   const endIndex = Math.min(startIndex + itemsPerPage, promoData?.length || 0);
-  // const visiblePromotions = promoData?.slice(startIndex, endIndex);
-  const [loading, setLoading] = useState(true); // Menambahkan status loading
+  const [loading, setLoading] = useState(true);
   const [fetchingData, setFetchingData] = useState(false)
-
+  const { isMobile, isDesktop } = useDevice()
 
   useEffect(() => {
     const loadPromo = async () => {
@@ -66,7 +68,7 @@ export default function PromoDetail() {
         const promoDataArray = await Promise.all(promoDataPromises);
         const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
         setPromoData(mergedPromoData);
-        setTimeout(() => setLoading(false), 120); // Menambahkan delay 200ms sebelum mengubah status loading
+        setTimeout(() => setLoading(false), 120); // Menambahkan delay 120ms sebelum mengubah status loading
       } catch (loadError) {
         console.error("Error loading promo items:", loadError)
         setLoading(false);
@@ -82,7 +84,6 @@ export default function PromoDetail() {
     window.scrollTo({ top: 0, behavior: 'auto' }); // Auto scroll to top when component mounts or updates
   }, []); // Run only once when component mounts
   
-
   const map = async (promotions: any[]): Promise<IPromotion[]> => {
     const result: IPromotion[] = []
   
@@ -119,8 +120,6 @@ export default function PromoDetail() {
     return string.replace(/(^\w|\s\w)/g, function(match) {
         return match.toUpperCase();
     });
-
-
   }
 
   useEffect(() => {
@@ -162,11 +161,10 @@ export default function PromoDetail() {
       
     }
   }
-
+  
+    
   const visiblePromotions = promoData?.slice(0, currentPage * 12)
 
-  
-  
   return (
     <BasicLayout>
       <Seo
@@ -177,22 +175,22 @@ export default function PromoDetail() {
 
       {loading ? (
         <div className='container flex justify-center my-4'>
-        <LogoSpinner width={48} height={48} />
-      </div>
+          <LogoSpinner width={48} height={48} />
+        </div>
       ) : promoData && promoItems.length >= 1 ? (
         <>
-          <div className='flex flex-wrap justify-center'>
+          <Swiper slidesPerView={isMobile? 1:4.7} spaceBetween={10} freeMode={true}>
+            <div className=' relative bg-slate-900'>
             {visiblePromotions?.map((promotion) => (
-              <div key={promotion.id} className="min-w-[40px] max-w-[400px] mr-[20px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
-                <ProductPromoCard promotion={promotion}/>
-              </div>
+              <SwiperSlide className='' key={promotion.id}>
+                <div className="min-w-[400px] max-w-[400px] mb-[20px] sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+                  <ProductPromoCard promotion={promotion}/>
+                </div>
+              </SwiperSlide>
             ))}
+            
           </div>
-          {fetchingData && (
-            <div className='container flex justify-center my-4'>
-              <LogoSpinner width={48} height={48} />
-            </div>
-          )}
+          </Swiper>
         </>
       ) : (
         <div className="text-center my-8">