Merge branch 'release' into Feature/category-management

1 files changed, 137 insertions, 0 deletions

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