<iman> add tampilkan lebih banyak pada card

2 files changed, 34 insertions, 10 deletions

diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx
index a21ba188..7187e9d7 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.jsx
@@ -1,10 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
 import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
 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'; // Adjust the path accordingly
+import usePromoStore from './promoStore'; // Sesuaikan dengan path yang sesuai
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
 const PromoList = ({ selectedPromo }) => {
   const {
@@ -39,7 +40,7 @@ const PromoList = ({ selectedPromo }) => {
     const fetchPromotions = async () => {
       setIsLoading(true);
       try {
-        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 50);
+        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); 
         setPromoItems(items);
 
         const promoDataPromises = items.map(async (item) => {
@@ -54,6 +55,7 @@ const PromoList = ({ selectedPromo }) => {
         const promoDataArray = await Promise.all(promoDataPromises);
         const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
         setPromoData(mergedPromoData);
+
       } catch (error) {
         console.error('Error fetching promo items:', error);
       } finally {
@@ -63,13 +65,19 @@ const PromoList = ({ selectedPromo }) => {
 
     if (slug) {
       setIsLoading(true);
-      // Reset the promoItems and promoData when slug changes
       setPromoItems([]);
       setPromoData([]);
       fetchPromotions();
     }
   }, [slug, setPromoItems, setPromoData, setIsLoading]);
 
+ 
+
+  const navigateToPromoPage = () => {
+    // Fungsi untuk menavigasikan pengguna ke halaman promo yang sesuai dengan slug
+    window.location.href = '/shop/promo/' + slug;
+  };
+
   return (
     <div className='h-[420px]'>
       <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
@@ -78,14 +86,26 @@ const PromoList = ({ selectedPromo }) => {
           <LogoSpinner width={48} height={48} />
         </div>
       ) : (
-        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode>
-          {promoData?.map((promotion) => (
+        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode >
+            {promoData?.map((promotion) => (
             <SwiperSlide key={promotion.id}>
               <div className="min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]">
                 <ProductPromoCard promotion={promotion} />
               </div>
             </SwiperSlide>
           ))}
+         <SwiperSlide>
+              <div className='rounded-lg flex items-center justify-center flex-col cursor-pointer  h-96 text-red-500 font-bold border-2 min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]' onClick={navigateToPromoPage}>
+                <ChevronRightIcon className="w-48 h-48 ml-2 font-normal text-red-500 hover:text-red-400 transition duration-300 transform hover:scale-125" />
+                <span className=''>
+                  Lihat lebih banyak
+                </span>
+
+                {/* <button className="mt-4 text-black font-bold py-2 px-4 rounded min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]" onClick={navigateToPromoPage}>
+                </button> */}
+              </div>
+            </SwiperSlide> 
+          
         </Swiper>
       )}
     </div>
@@ -93,3 +113,7 @@ const PromoList = ({ selectedPromo }) => {
 };
 
 export default PromoList;
+// border-radius: 0.5rem;
+//     border-width: 1px;
+//     --tw-border-opacity: 1;
+//     border-color: rgb(219 219 219 / var(--tw-border-opacity));
\ No newline at end of file
diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 7e042a4a..5b91d82f 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -20,7 +20,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/diskon.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -46,7 +46,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/silat.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -72,7 +72,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/barong.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div>
@@ -98,7 +98,7 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                   quality={100}
                   src='/images/icon_promo/angklung.svg'
                   alt=''
-                  className='h-20 w-20 rounded'
+                  className='h-12 w-12 rounded'
                 />
               </div>
               <div >