From 595c5cd7b371c61874db47ae42819acca5fc5d16 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 29 Jun 2024 13:46:30 +0700
Subject: <iman> update mobile view

---
 src-migrate/modules/promo/components/Hero.tsx | 86 ++++++++++++++++++++-------
 1 file changed, 63 insertions(+), 23 deletions(-)

(limited to 'src-migrate/modules/promo/components/Hero.tsx')

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index ad1d0046..2701250d 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -8,7 +8,10 @@ import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
 import { getBanner } from '~/services/banner';
 import style from '../styles/hero.module.css';
 import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import  { Navigation, Pagination, Autoplay } from 'swiper';
+import MobileView from '../../../../src/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
 
 const swiperBanner: SwiperProps = {
   modules:[Navigation, Pagination, Autoplay],
@@ -20,8 +23,18 @@ const swiperBanner: SwiperProps = {
   className: 'h-[400px] w-full',
   slidesPerView: 1,
   spaceBetween: 10,
-  navigation:true,
+  pagination:true,
 }
+const swiperBannerMob = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false,
+  },
+  modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'border border-gray_r-6 min-h-full',
+  slidesPerView: 1,
+};
 
 const Hero = () => {
   const bannerQuery = useQuery({
@@ -35,33 +48,60 @@ const Hero = () => {
     if (banners.length > 1) {
       swiperBanner.slidesPerView = 1.1;
       swiperBanner.loop = true;
+      swiperBannerMobile.loop = true;
     }
   }, [banners]);
 
+  const swiperBannerMobile = {
+    ...swiperBannerMob,
+    pagination: { dynamicBullets: false, clickable: true },
+  };
+
   return (
-    <div className={style['wrapper']}>
-      <div className={style['desc-section']}>
-        <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
-        <div className='h-4' />
-        <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
-      </div>
+    <>
+      <DesktopView>
+        <div className={style['wrapper']}>
+          <div className={style['desc-section']}>
+            <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
+            <div className='h-4' />
+            <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
+          </div>
 
-      <div className={style['banner-section']}>
-        <Swiper {...swiperBanner}>
-          {banners.map((banner, index) => (
-            <SwiperSlide key={index}>
-              <Image
-                src={banner.image}
-                alt={banner.name}
-                width={666}
-                height={450}
-                className='w-full h-full object-cover object-center rounded-2xl'
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
-    </div>
+          <div className={style['banner-section']}>
+            <Swiper {...swiperBanner}>
+              {banners.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={450}
+                    quality={100}
+                    className='w-full h-full object-fit object-center rounded-2xl' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </div>
+        </div>
+      </DesktopView>
+      <MobileView>
+          <Swiper {...swiperBannerMobile}>
+            {banners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                    <Image
+                      width={439}
+                      height={150}
+                      quality={100}
+                      src={banner.image}
+                      alt={banner.name}
+                      className='w-full h-full object-cover object-center rounded-2xl'
+                    />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+          
+      </MobileView>
+    </>
   )
 }
 
-- 
cgit v1.2.3