add keen slider and apply to product slider

assets/global.css

@@ -13,6 +13,8 @@
   --text-secondary: white;
 
   --hover: rgba(0, 0, 0, 0.075);
+  --hover-1: rgba(0, 0, 0, 0.15);
+  --hover-2: rgba(0, 0, 0, 0.25);
 
   --cyan: #50e3c2;
   --green: #37b679;
@@ -40,6 +42,8 @@
   --secondary: white;
   --secondary-2: #f1f3f5;
   --hover: rgba(255, 255, 255, 0.075);
+  --hover-1: rgba(255, 255, 255, 0.15);
+  --hover-2: rgba(255, 255, 255, 0.25);
   --selection: var(--purple);
 
   --text-base: white;

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 {

package.json

@@ -28,6 +28,7 @@
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
+    "keen-slider": "^5.2.4",
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "next": "^9.5.6-canary.9",

pages/_app.tsx

@@ -1,6 +1,7 @@
 import '@assets/global.css'
 import '@assets/tailwind.css'
 import '@assets/utils.css'
+import 'keen-slider/keen-slider.min.css'
 
 // To be removed
 import 'animate.css'

tailwind.config.js

@@ -15,6 +15,8 @@ module.exports = {
         secondary: 'var(--secondary)',
         'secondary-2': 'var(--secondary-2)',
         hover: 'var(--hover)',
+        'hover-1': 'var(--hover-1)',
+        'hover-2': 'var(--hover-2)',
         'accents-0': 'var(--accents-0)',
         'accents-1': 'var(--accents-1)',
         'accents-2': 'var(--accents-2)',

yarn.lock

@@ -5399,6 +5399,11 @@ jws@^3.2.2:
     jwa "^1.4.1"
     safe-buffer "^5.0.1"
 
+keen-slider@^5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/keen-slider/-/keen-slider-5.2.4.tgz#9e2a889c63c02a651c81caa438f3691e9a3bc0a8"
+  integrity sha512-z39afyASW63B+1FzWGzBkvXAnzJl3gAD8M+32TmhJAPJqjckCaKYm7YBjpSba04AoVMQw8y9U1LVcUucVVIQkQ==
+
 keycode@^2.1.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"