add keen slider and apply to product slider

components/product/ProductSlider/ProductSlider.module.css

@@ -1,22 +1,48 @@
 .root {
-  @apply relative w-full h-full;
+  @apply relative w-full h-full relative;
   overflow-y: hidden;
+}
 
-  & > div {
-    overflow: visible !important;
+.leftControl,
+.rightControl {
+  @apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
+}
+
+.leftControl {
+  @apply left-6;
+}
+
+.rightControl {
+  @apply right-6 rotate-180 transform;
+}
+
+.control {
+  @apply opacity-0 transition-all duration-150;
+}
+
+.root:hover .control {
+  @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+  @apply hidden;
+  @screen sm {
+    @apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
   }
 }
 
-.rootPanel {
-  @apply absolute flex flex-row inset-0 z-20 m-20;
+.positionIndicator {
+  @apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none;
 }
 
-.leftPanel {
-  @apply flex-1;
-  cursor: url('/cursor-left.png'), auto;
-}
-
-.rightPanel {
-  @apply flex-1;
-  cursor: url('/cursor-right.png'), auto;
+.positionIndicatorActive {
+  @apply bg-white hover:bg-white;
 }
+/* sx={{
+  width: '10px',
+  height: '10px',
+  bg: currentSlide === idx ? 'primary' : 'gray',
+  borderRadius: 'full',
+  mx: 2,
+  '&:focus': { outline: 'none' },
+}} */

components/product/ProductSlider/ProductSlider.tsx

@@ -1,36 +1,61 @@
-import React, { FC, useState } from 'react'
-import SwipeableViews from 'react-swipeable-views'
+import { ArrowLeft } from '@components/icon'
+import { useKeenSlider } from 'keen-slider/react'
+import React, { Children, FC, isValidElement, useState } from 'react'
+import cn from 'classnames'
+
 import s from './ProductSlider.module.css'
-interface Props {
-  children?: any
-}
 
-const ProductSlider: FC<Props> = ({ children }) => {
-  const [idx, setIdx] = useState(0)
-  const count = React.Children.count(children)
-
-  const goBack = () => {
-    idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1)
-  }
-
-  const goNext = () => {
-    idx + 1 === count ? setIdx(0) : setIdx(idx + 1)
-  }
+const ProductSlider: FC = ({ children }) => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [ref, slider] = useKeenSlider<HTMLDivElement>({
+    slideChanged(s) {
+      setCurrentSlide(s.details().relativeSlide)
+    },
+    loop: true,
+  })
 
   return (
     <div className={s.root}>
-      <SwipeableViews
-        index={idx}
-        onChangeIndex={setIdx}
-        containerStyle={{ overflow: 'visible' }}
-        slideStyle={{ overflow: 'visible' }}
-      >
-        {children}
-      </SwipeableViews>
-      <div className={s.rootPanel}>
-        <div className={s.leftPanel} onClick={goBack}></div>
-        <div className={s.rightPanel} onClick={goNext}></div>
+      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
+        <ArrowLeft />
+      </button>
+      <button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
+        <ArrowLeft />
+      </button>
+      <div ref={ref} className="keen-slider h-full">
+        {Children.map(children, (child) => {
+          // Add the keen-slider__slide className to children
+          if (isValidElement(child)) {
+            return {
+              ...child,
+              props: {
+                ...child.props,
+                className: `${
+                  child.props.className ? `${child.props.className} ` : ''
+                }keen-slider__slide`,
+              },
+            }
+          }
+          return child
+        })}
       </div>
+      {slider && (
+        <div className={cn(s.positionIndicatorsContainer)}>
+          {[...Array(slider.details().size).keys()].map((idx) => {
+            return (
+              <button
+                key={idx}
+                className={cn(s.positionIndicator, {
+                  [s.positionIndicatorActive]: currentSlide === idx,
+                })}
+                onClick={() => {
+                  slider.moveToSlideRelative(idx)
+                }}
+              />
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }

components/product/ProductView/ProductView.module.css

@@ -2,7 +2,7 @@
   @apply relative grid items-start gap-8 grid-cols-1;
 
   @screen lg {
-    @apply grid-cols-12 pt-10;
+    @apply grid-cols-12;
   }
 }
 
@@ -24,17 +24,11 @@
 }
 
 .squareBg {
-  @apply absolute inset-0 bg-violet z-0;
-  max-height: 250px;
-
-  @screen md {
-    @apply inset-20;
-    max-height: 500px;
-  }
+  @apply absolute inset-0 bg-violet z-0 h-full;
 }
 
 .nameBox {
-  @apply absolute top-6 left-0 z-10;
+  @apply absolute top-6 left-6 z-20;
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,7 +43,7 @@
   @screen md {
     & .name,
     & .price {
-      @apply bg-violet text-white;
+      @apply bg-hover-1 text-white;
     }
   }
 }
@@ -67,22 +61,7 @@
 }
 
 .img {
-  @apply w-full h-full object-cover;
-
-  @screen md {
-    height: 100%;
-    margin-top: -2.75rem;
-  }
-
-  @screen lg {
-    height: 150%;
-    margin-top: -10%;
-  }
-
-  @screen xl {
-    height: 170%;
-    margin-top: -19%;
-  }
+  @apply w-full h-auto max-h-full object-cover;
 }
 
 .button {