fix product slider layout

2 files changed, 25 insertions, 23 deletions

diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 0a7d690a..b75a191b 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -290,7 +290,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           </div>
         </div>
         <div className='mt-8 mb-4'>
-          <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+          <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
           <LazyLoad>
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index c8bd3a82..931a8db7 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -12,7 +12,7 @@ const bannerClassName =
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
-  const { isMobile } = useDevice()
+  const { isMobile, isDesktop } = useDevice()
 
   const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
@@ -32,27 +32,29 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
           />
         </div>
       )}
-      <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>
-        ))}
-      </Swiper>
+      {(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>
+          ))}
+        </Swiper>
+      )}
     </>
   )
 }