From 7c61c990c7987f7c3991e74ce53eb3204e268c75 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 26 Jun 2024 11:01:06 +0700
Subject: <iman> add sample for all promotion

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

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

diff --git a/src-migrate/modules/promo/components/HeroDiskon.tsx b/src-migrate/modules/promo/components/HeroDiskon.tsx
new file mode 100644
index 00000000..6d38c763
--- /dev/null
+++ b/src-migrate/modules/promo/components/HeroDiskon.tsx
@@ -0,0 +1,137 @@
+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  { Autoplay, Navigation, Pagination } from 'swiper';
+
+const swiperBanner: SwiperProps = {
+  modules:[Navigation, Pagination, Autoplay],
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+  navigation:true,
+}
+const swiperBanner2: SwiperProps = {
+  modules: [Pagination, Autoplay],
+  autoplay: {
+    delay: 5000,
+  },
+  loop: true,
+  className: 'h-[400px] w-full',
+  slidesPerView: 1,
+  spaceBetween: 10,
+}
+
+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;
+      swiperBanner.loop = true;
+    }
+  }, [banners]);
+
+  return (
+    
+    <div className="grid grid-cols-3 gap-4">
+        <div className="row-span-2 h-[446px] flex items-center ">
+            <Swiper {...swiperBanner}>
+            {banners.map((banner, index) => (
+                <SwiperSlide key={index}>
+                <Image
+                    src={banner.image}
+                    alt={banner.name}
+                    width={666}
+                    height={480}
+                    className='w-[446px]  h-[446px] object-fill object-center rounded-2xl'
+                />
+                </SwiperSlide>
+            ))}
+            </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px] ">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl '
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+            <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        <div className="w-[400px] h-[217px]">
+        <Swiper {...swiperBanner2}>
+          {banners.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                width={666}
+                height={450}
+                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        </div>
+        
+    </div>
+  
+    
+    
+  )
+}
+
+export default Hero
\ No newline at end of file
-- 
cgit v1.2.3