From 9aa0e5e63bd69ac67bd24d1c64f4c78662dd60d6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 20 May 2023 10:19:13 +0700
Subject: Fix product slider

---
 src/lib/product/components/ProductSlider.jsx | 63 +++++++++++++++++-----------
 1 file changed, 39 insertions(+), 24 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 931a8db7..b511eea5 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -4,15 +4,16 @@ import ProductCard from './ProductCard'
 import 'swiper/css'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import useDevice from '@/core/hooks/useDevice'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const bannerClassName =
   'absolute rounded-r top-0 left-0 h-full w-auto md:w-[20%] idt-transition border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
-  const { isMobile, isDesktop } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -20,6 +21,32 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
     bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
   }
 
+  const swiperProps = {
+    onSliderMove: changeBannerOpacity,
+    onSlideChangeTransitionStart: changeBannerOpacity,
+    onSlideChangeTransitionEnd: changeBannerOpacity,
+    prefix: 'product',
+    modules: [FreeMode],
+    freeMode: { enabled: true, sticky: false }
+  }
+
+  const swiperContent = useMemo(() => {
+    return (
+      <>
+        {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>
+        ))}
+      </>
+    )
+  }, [bannerMode, products, simpleTitle])
+
   return (
     <>
       {bannerMode && (
@@ -32,29 +59,17 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
           />
         </div>
       )}
-      {(isMobile || isDesktop) && (
-        <Swiper
-          freeMode={{ enabled: true, sticky: false }}
-          slidesPerView={isMobile ? 2.2 : 5.6}
-          spaceBetween={isMobile ? 8 : 16}
-          onSliderMove={changeBannerOpacity}
-          onSlideChangeTransitionEnd={changeBannerOpacity}
-          onSlideChangeTransitionStart={changeBannerOpacity}
-          prefix='product'
-          modules={[FreeMode]}
-        >
-          {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>
-          ))}
+      <MobileView>
+        <Swiper slidesPerView={2.2} spaceBetween={12} {...swiperProps}>
+          {swiperContent}
         </Swiper>
-      )}
+      </MobileView>
+
+      <DesktopView>
+        <Swiper slidesPerView={5.6} spaceBetween={16} {...swiperProps}>
+          {swiperContent}
+        </Swiper>
+      </DesktopView>
     </>
   )
 }
-- 
cgit v1.2.3