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 ++++++++++++++++++++++++
 src-migrate/modules/promo/components/Voucher.tsx | 11 +++++
 2 files changed, 66 insertions(+)
 create mode 100644 src-migrate/modules/promo/components/Hero.tsx
 create mode 100644 src-migrate/modules/promo/components/Voucher.tsx

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

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
diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
new file mode 100644
index 00000000..11742f9a
--- /dev/null
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -0,0 +1,11 @@
+import style from '../styles/voucher.module.css'
+
+const Voucher = () => {
+  return (
+    <>
+      <div className={style['title']}>Pakai Voucher Belanja</div>
+    </>
+  )
+}
+
+export default Voucher
\ No newline at end of file
-- 
cgit v1.2.3