diff options
| -rw-r--r-- | src/pages/shop/promo/[slug].tsx | 40 |
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"> |