Merge branch 'feature/all-promotion' into development

1 files changed, 108 insertions, 0 deletions

diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
new file mode 100644
index 00000000..2701250d
--- /dev/null
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -0,0 +1,108 @@
+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';
+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],
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+  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({
+    queryKey: ['banner.all-promo'],
+    queryFn: () => getBanner({ type: 'banner-promotion' })
+  })
+
+  const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
+
+  useEffect(() => {
+    if (banners.length > 1) {
+      swiperBanner.slidesPerView = 1.1;
+      swiperBanner.loop = true;
+      swiperBannerMobile.loop = true;
+    }
+  }, [banners]);
+
+  const swiperBannerMobile = {
+    ...swiperBannerMob,
+    pagination: { dynamicBullets: false, clickable: true },
+  };
+
+  return (
+    <>
+      <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}
+                    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>
+    </>
+  )
+}
+
+export default Hero
\ No newline at end of file