From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/product/components/ProductSlider.jsx | 51 ++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/lib/product/components/ProductSlider.jsx

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
new file mode 100644
index 00000000..8d677547
--- /dev/null
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -0,0 +1,51 @@
+import { Swiper, SwiperSlide } from "swiper/react"
+import ProductCard from "./ProductCard"
+import "swiper/css"
+import Image from "@/core/components/elements/Image/Image"
+import Link from "@/core/components/elements/Link/Link"
+import { useState } from "react"
+
+const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+
+const ProductSlider = ({ 
+  products, 
+  simpleTitle = false,
+  bannerMode = false 
+}) => {
+  const [ activeIndex, setActiveIndex ] = useState(0)
+  const swiperSliderFirstMove = (swiper) => {
+    setActiveIndex(swiper.activeIndex)
+  }
+
+  return (
+    <>
+      { bannerMode && (
+        <Image 
+          src={products.banner.image} 
+          alt={products.banner.name} 
+          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`} 
+        />
+      ) }
+      <Swiper 
+        freeMode={true} 
+        slidesPerView={2.2} 
+        spaceBetween={8} 
+        onSlideChange={swiperSliderFirstMove} 
+        prefix="product"
+      >
+        { bannerMode && (
+          <SwiperSlide>
+            <Link href={products.banner.url} className="w-full h-full block"></Link>
+          </SwiperSlide>
+        ) }
+        { products?.products?.map((product, index) => (
+          <SwiperSlide key={index}>
+            <ProductCard product={product} simpleTitle={simpleTitle} />
+          </SwiperSlide>
+        )) }
+      </Swiper>
+    </>
+  )
+}
+
+export default ProductSlider
\ No newline at end of file
-- 
cgit v1.2.3

