From 3f849355048e5c280a35a5747577e5296b90e9fd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 25 Jan 2024 15:27:27 +0700
Subject: Add all promo page

---
 src-migrate/modules/promo/components/Hero.tsx | 55 +++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/Hero.tsx

(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
new file mode 100644
index 00000000..63524509
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,55 @@
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
+import style from '../styles/hero.module.css';
+import 'swiper/css'
+import Image from 'next/image';
+import { useQuery } from 'react-query';
+import { getBanner } from '~/services/banner';
+
+const swiperBanner: SwiperProps = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  // modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1.1,
+  spaceBetween: 10
+}
+
+const Hero = () => {
+  const bannerQuery = useQuery({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'all-promo' })
+  })
+
+  const banners = bannerQuery.data || []
+
+  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>
+
+      <div className={style['banner-section']}>
+        <Swiper {...swiperBanner}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-full h-full object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
+
+export default Hero
\ No newline at end of file
-- 
cgit v1.2.3


From 8d8c43d90373aab6238773e291a48d65d55c52a2 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 17 Feb 2024 10:23:23 +0700
Subject: Add voucher section

---
 src-migrate/modules/promo/components/Hero.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 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 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']}>
-- 
cgit v1.2.3


From 208b234320b6c42491a4e87a1c3db3abab9c1715 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 21 Jun 2024 10:52:28 +0700
Subject: <iman> update all-promotion

---
 src-migrate/modules/promo/components/Hero.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 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 5470b93b..d8bb0be4 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -3,26 +3,30 @@ 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 { getBanner } from '~/services/banner';
 import style from '../styles/hero.module.css';
+import 'swiper/css/navigation';
+import  { Navigation, Pagination } from 'swiper';
 
 const swiperBanner: SwiperProps = {
+  modules:[Navigation, Pagination],
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
   },
-  loop: false,
+  loop: true,
   className: 'h-[400px] w-full',
   slidesPerView: 1,
-  spaceBetween: 10
+  spaceBetween: 10,
+  navigation:true,
 }
 
 const Hero = () => {
   const bannerQuery = useQuery({
     queryKey: ['banner.all-promo'],
-    queryFn: () => getBanner({ type: 'all-promo' })
+    queryFn: () => getBanner({ type: 'banner-promotion' })
   })
 
   const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
@@ -47,7 +51,7 @@ const Hero = () => {
           {banners.map((banner, index) => (
             <SwiperSlide key={index}>
               <Image
-                src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363'
+                src={banner.image}
                 alt={banner.name}
                 width={666}
                 height={450}
-- 
cgit v1.2.3


From eec3440fe52db85b325c600fdd393590dee906fe Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 26 Jun 2024 15:30:48 +0700
Subject: <iman> update all promotion

---
 src-migrate/modules/promo/components/Hero.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 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 d8bb0be4..ad1d0046 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -8,10 +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  { Navigation, Pagination } from 'swiper';
+import  { Navigation, Pagination, Autoplay } from 'swiper';
 
 const swiperBanner: SwiperProps = {
-  modules:[Navigation, Pagination],
+  modules:[Navigation, Pagination, Autoplay],
   autoplay: {
     delay: 6000,
     disableOnInteraction: false
-- 
cgit v1.2.3


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