<iman> update mobile view

1 files changed, 13 insertions, 11 deletions

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 14d3c301..397134e8 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -5,25 +5,27 @@ import { getVoucher } from '~/services/voucher'
 import style from '../styles/voucher.module.css'
 import Image from 'next/image'
 import { useToast } from '@chakra-ui/react'
+import useDevice from '@/core/hooks/useDevice';
 
-const swiperVoucher: SwiperProps = {
-  autoplay: {
-    delay: 6000,
-    disableOnInteraction: false
-  },
-  loop: false,
-  className: 'h-[160px] w-full',
-  slidesPerView: 3,
-  spaceBetween: 16
-}
 
 const Voucher = () => {
+  const { isMobile } = useDevice();
   const toast = useToast();
   const voucherQuery = useQuery({
     queryKey: ['voucher.all-voucher'],
     queryFn: getVoucher
   })
-
+  
+  const swiperVoucher: SwiperProps = {
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    loop: false,
+    className: 'h-[160px] w-full',
+    slidesPerView: isMobile ? 1.2 : 3,
+    spaceBetween: 16
+  }
   const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]);
 
   const copyText = (text: string) => {