From 36601aba6017aeef16f89351eb487238402ab52e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 24 Sep 2024 16:12:50 +0700
Subject: <iman> update Perapihan Tag

---
 src-migrate/modules/promo/components/Hero.tsx | 103 ++++++++++++++------------
 1 file changed, 57 insertions(+), 46 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 97cbe0b7..7d0aad11 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -3,34 +3,34 @@ 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 { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
 import style from '../styles/hero.module.css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-import  { Navigation, Pagination, Autoplay } from 'swiper';
+import { Navigation, Pagination, Autoplay } from 'swiper';
 import MobileView from '../../../../src/core/components/views/MobileView';
 import DesktopView from '@/core/components/views/DesktopView';
-import {bannerApi} from '../../../../src/api/bannerApi'
+import { bannerApi } from '../../../../src/api/bannerApi';
 
 interface IPromotionProgram {
   headlineBanner: string;
   descriptionBanner: string;
-  image: string ;
+  image: string;
   name: string;
 }
 
 const swiperBanner: SwiperProps = {
-  modules:[Navigation, Pagination, Autoplay],
+  modules: [Navigation, Pagination, Autoplay],
   autoplay: {
     delay: 6000,
-    disableOnInteraction: false
+    disableOnInteraction: false,
   },
   loop: true,
   className: 'h-[400px] w-full',
   slidesPerView: 1,
   spaceBetween: 10,
-  pagination:true,
-}
+  pagination: true,
+};
 const swiperBannerMob = {
   autoplay: {
     delay: 6000,
@@ -43,7 +43,10 @@ const swiperBannerMob = {
 };
 
 const Hero = () => {
-  const heroBanner = useQuery('allPromo', bannerApi({ type: 'banner-semua-promo' }));
+  const heroBanner = useQuery(
+    'allPromo',
+    bannerApi({ type: 'banner-semua-promo' })
+  );
 
   const banners: IPromotionProgram[] = useMemo(
     () => heroBanner?.data || [],
@@ -54,52 +57,60 @@ const Hero = () => {
     ...swiperBannerMob,
     pagination: { dynamicBullets: false, clickable: true },
   };
-  
+
   return (
     <>
       <DesktopView>
         <div className={style['wrapper']}>
-            <Swiper {...swiperBanner}>
-              {banners?.map((banner, index) => (
-                <SwiperSlide key={index} className='flex flex-row'>
-                  <div className={style['desc-section']}>
-                    <div className={style['title']}>{banner?.headlineBanner? banner?.headlineBanner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div>
-                    <div className='h-4' />
-                    <div className={style['subtitle']}>{banner?.descriptionBanner? banner?.descriptionBanner : "Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!"}</div>
+          <Swiper {...swiperBanner}>
+            {banners?.map((banner, index) => (
+              <SwiperSlide key={index} className='flex flex-row'>
+                <div className={style['desc-section']}>
+                  <div className={style['title']}>
+                    {banner?.headlineBanner
+                      ? banner?.headlineBanner
+                      : 'Pasti Hemat & Untung Selama Belanja di Indoteknik.com!'}
                   </div>
-                  <div className={style['banner-section']}>
-                    <Image
-                      src={banner.image}
-                      alt={banner.name}
-                      width={666}
-                      height={450}
-                      quality={90}
-                      className='w-full h-full object-fit object-center rounded-2xl' />
+                  <div className='h-4' />
+                  <div className={style['subtitle']}>
+                    {banner?.descriptionBanner
+                      ? banner?.descriptionBanner
+                      : 'Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!'}
                   </div>
-                </SwiperSlide>
-              ))}
-            </Swiper>
-        </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'
-                    />
+                </div>
+                <div className={style['banner-section']}>
+                  <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={450}
+                    quality={85}
+                    className='w-full h-full object-fit object-center rounded-2xl'
+                  />
+                </div>
               </SwiperSlide>
             ))}
           </Swiper>
-          
+        </div>
+      </DesktopView>
+      <MobileView>
+        <Swiper {...swiperBannerMobile}>
+          {banners?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                width={439}
+                height={150}
+                quality={85}
+                src={banner?.image}
+                alt={banner?.name}
+                className='w-full h-full object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
       </MobileView>
     </>
-  )
-}
+  );
+};
 
-export default Hero
\ No newline at end of file
+export default Hero;
-- 
cgit v1.2.3