Add voucher section

1 files changed, 16 insertions, 7 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 63524509..5470b93b 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -1,19 +1,21 @@
-import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
-import style from '../styles/hero.module.css';
-import 'swiper/css'
+import 'swiper/css';
+
 import Image from 'next/image';
+import { useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+
 import { getBanner } from '~/services/banner';
+import style from '../styles/hero.module.css';
 
 const swiperBanner: SwiperProps = {
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
   },
-  // modules: [Pagination, Autoplay],
-  loop: true,
+  loop: false,
   className: 'h-[400px] w-full',
-  slidesPerView: 1.1,
+  slidesPerView: 1,
   spaceBetween: 10
 }
 
@@ -23,7 +25,14 @@ const Hero = () => {
     queryFn: () => getBanner({ type: 'all-promo' })
   })
 
-  const banners = bannerQuery.data || []
+  const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
+
+  useEffect(() => {
+    if (banners.length > 1) {
+      swiperBanner.slidesPerView = 1.1;
+      swiperBanner.loop = true;
+    }
+  }, [banners]);
 
   return (
     <div className={style['wrapper']}>