Refactor

1 files changed, 39 insertions, 0 deletions

diff --git a/src2/components/products/ProductSlider.js b/src2/components/products/ProductSlider.js
new file mode 100644
index 00000000..662a6511
--- /dev/null
+++ b/src2/components/products/ProductSlider.js
@@ -0,0 +1,39 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import ProductCard from "./ProductCard";
+import "swiper/css";
+import Image from "../elements/Image";
+import Link from "../elements/Link";
+import { SkeletonProduct } from "../elements/Skeleton";
+import { useState } from "react";
+
+export default function ProductSlider({ 
+  products, 
+  simpleProductTitleLine = 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={`absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6 ` + (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 data={product} simpleProductTitleLine={simpleProductTitleLine} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      { !products ? <SkeletonProduct /> : ''}
+    </>
+  )
+}
\ No newline at end of file