From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/product/components/ProductSlider.jsx | 51 ++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/lib/product/components/ProductSlider.jsx

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
new file mode 100644
index 00000000..8d677547
--- /dev/null
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -0,0 +1,51 @@
+import { Swiper, SwiperSlide } from "swiper/react"
+import ProductCard from "./ProductCard"
+import "swiper/css"
+import Image from "@/core/components/elements/Image/Image"
+import Link from "@/core/components/elements/Link/Link"
+import { useState } from "react"
+
+const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+
+const ProductSlider = ({ 
+  products, 
+  simpleTitle = false,
+  bannerMode = false 
+}) => {
+  const [ activeIndex, setActiveIndex ] = useState(0)
+  const swiperSliderFirstMove = (swiper) => {
+    setActiveIndex(swiper.activeIndex)
+  }
+
+  return (
+    <>
+      { bannerMode && (
+        <Image 
+          src={products.banner.image} 
+          alt={products.banner.name} 
+          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`} 
+        />
+      ) }
+      <Swiper 
+        freeMode={true} 
+        slidesPerView={2.2} 
+        spaceBetween={8} 
+        onSlideChange={swiperSliderFirstMove} 
+        prefix="product"
+      >
+        { 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>
+    </>
+  )
+}
+
+export default ProductSlider
\ No newline at end of file
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/product/components/ProductSlider.jsx | 59 +++++++++++++---------------
 1 file changed, 28 insertions(+), 31 deletions(-)

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 8d677547..aafd3cf1 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -1,51 +1,48 @@
-import { Swiper, SwiperSlide } from "swiper/react"
-import ProductCard from "./ProductCard"
-import "swiper/css"
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import { useState } from "react"
+import { Swiper, SwiperSlide } from 'swiper/react'
+import ProductCard from './ProductCard'
+import 'swiper/css'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import { useState } from 'react'
 
-const bannerClassName = 'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
+const bannerClassName =
+  'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
 
-const ProductSlider = ({ 
-  products, 
-  simpleTitle = false,
-  bannerMode = false 
-}) => {
-  const [ activeIndex, setActiveIndex ] = useState(0)
+const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
+  const [activeIndex, setActiveIndex] = useState(0)
   const swiperSliderFirstMove = (swiper) => {
     setActiveIndex(swiper.activeIndex)
   }
 
   return (
     <>
-      { bannerMode && (
-        <Image 
-          src={products.banner.image} 
-          alt={products.banner.name} 
-          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`} 
+      {bannerMode && (
+        <Image
+          src={products.banner.image}
+          alt={products.banner.name}
+          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
         />
-      ) }
-      <Swiper 
-        freeMode={true} 
-        slidesPerView={2.2} 
-        spaceBetween={8} 
-        onSlideChange={swiperSliderFirstMove} 
-        prefix="product"
+      )}
+      <Swiper
+        freeMode={true}
+        slidesPerView={2.2}
+        spaceBetween={8}
+        onSlideChange={swiperSliderFirstMove}
+        prefix='product'
       >
-        { bannerMode && (
+        {bannerMode && (
           <SwiperSlide>
-            <Link href={products.banner.url} className="w-full h-full block"></Link>
+            <Link href={products.banner.url} className='w-full h-full block'></Link>
           </SwiperSlide>
-        ) }
-        { products?.products?.map((product, index) => (
+        )}
+        {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
             <ProductCard product={product} simpleTitle={simpleTitle} />
           </SwiperSlide>
-        )) }
+        ))}
       </Swiper>
     </>
   )
 }
 
-export default ProductSlider
\ No newline at end of file
+export default ProductSlider
-- 
cgit v1.2.3


From 5985a858fae9f1995bcc0c69651924cc3518a776 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 14:42:23 +0700
Subject: fix

---
 src/lib/product/components/ProductSlider.jsx | 31 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index aafd3cf1..eeea7acc 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -1,34 +1,43 @@
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { FreeMode } from 'swiper'
 import ProductCard from './ProductCard'
 import 'swiper/css'
+import 'swiper/css/free-mode'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 const bannerClassName =
   'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
 
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
-  const [activeIndex, setActiveIndex] = useState(0)
-  const swiperSliderFirstMove = (swiper) => {
-    setActiveIndex(swiper.activeIndex)
+  const bannerRef = useRef('')
+
+  const onSliderMove = (swiper) => {
+    if (!bannerMode) return
+    const calculateOpacity = (132 + swiper.translate) / 100
+    bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
   }
 
   return (
     <>
       {bannerMode && (
-        <Image
-          src={products.banner.image}
-          alt={products.banner.name}
-          className={`${bannerClassName} ${activeIndex > 0 ? 'opacity-0' : 'opacity-100'}`}
-        />
+        <div ref={bannerRef}>
+          <Image
+            src={products.banner.image}
+            alt={products.banner.name}
+            style={{ opacity: 1 }}
+            className={bannerClassName}
+          />
+        </div>
       )}
       <Swiper
-        freeMode={true}
+        freeMode={{ enabled: true, sticky: false }}
         slidesPerView={2.2}
         spaceBetween={8}
-        onSlideChange={swiperSliderFirstMove}
+        onSliderMove={onSliderMove}
         prefix='product'
+        modules={[FreeMode]}
       >
         {bannerMode && (
           <SwiperSlide>
-- 
cgit v1.2.3


From 7cbd033633ebc549ce06cff278b197c4f186f9dd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 14:54:18 +0700
Subject: fix

---
 src/lib/product/components/ProductSlider.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index eeea7acc..0dab2f6b 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -2,10 +2,9 @@ import { Swiper, SwiperSlide } from 'swiper/react'
 import { FreeMode } from 'swiper'
 import ProductCard from './ProductCard'
 import 'swiper/css'
-import 'swiper/css/free-mode'
 import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 
 const bannerClassName =
   'absolute rounded-r top-0 left-0 h-full max-w-[52%] idt-transition border border-gray_r-6'
@@ -13,7 +12,7 @@ const bannerClassName =
 const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => {
   const bannerRef = useRef('')
 
-  const onSliderMove = (swiper) => {
+  const changeBannerOpacity = (swiper) => {
     if (!bannerMode) return
     const calculateOpacity = (132 + swiper.translate) / 100
     bannerRef.current.style = `opacity: ${calculateOpacity > 0 ? calculateOpacity : 0}`
@@ -35,7 +34,9 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
         freeMode={{ enabled: true, sticky: false }}
         slidesPerView={2.2}
         spaceBetween={8}
-        onSliderMove={onSliderMove}
+        onSliderMove={changeBannerOpacity}
+        onSlideChangeTransitionEnd={changeBannerOpacity}
+        onSlideChangeTransitionStart={changeBannerOpacity}
         prefix='product'
         modules={[FreeMode]}
       >
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/product/components/ProductSlider.jsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/lib/product/components/ProductSlider.jsx')

diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 0dab2f6b..060d4638 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -42,12 +42,18 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
       >
         {bannerMode && (
           <SwiperSlide>
-            <Link href={products.banner.url} className='w-full h-full block'></Link>
+            <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} />
+            <ProductCard
+              product={product}
+              simpleTitle={simpleTitle}
+            />
           </SwiperSlide>
         ))}
       </Swiper>
-- 
cgit v1.2.3