Merged in Feature/perf/product-detail (pull request #127)

Feature/perf/product detail

2 files changed, 45 insertions, 0 deletions

diff --git a/src-migrate/modules/product-slider/components/ProductSlider.tsx b/src-migrate/modules/product-slider/components/ProductSlider.tsx
new file mode 100644
index 00000000..3d6e7593
--- /dev/null
+++ b/src-migrate/modules/product-slider/components/ProductSlider.tsx
@@ -0,0 +1,42 @@
+import 'swiper/css'
+
+import React from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode } from 'swiper'
+
+import ProductCard from '~/modules/product-card'
+import { IProduct } from '~/types/product'
+import useDevice from '@/core/hooks/useDevice'
+
+type Props = {
+  products: IProduct[],
+  productLayout?: 'vertical' | 'horizontal',
+}
+
+const ProductSlider = ({ products, productLayout }: Props) => {
+  const { isDesktop } = useDevice()
+
+  return (
+    <div>
+      <Swiper
+        slidesPerView={isDesktop ? 6.7 : 1.85}
+        spaceBetween={isDesktop ? 16 : 12}
+        prefix='product-slider'
+        modules={[FreeMode]}
+        freeMode={{ enabled: true, sticky: false }}
+        className='!pb-0.5'
+      >
+        {products.map((product) => (
+          <SwiperSlide key={product.id}>
+            <ProductCard
+              product={product}
+              layout={productLayout}
+            />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div >
+  )
+}
+
+export default ProductSlider
\ No newline at end of file
diff --git a/src-migrate/modules/product-slider/index.ts b/src-migrate/modules/product-slider/index.ts
new file mode 100644
index 00000000..1593a543
--- /dev/null
+++ b/src-migrate/modules/product-slider/index.ts
@@ -0,0 +1,3 @@
+import ProductSlider from './components/ProductSlider';
+
+export default ProductSlider;