From ffec57fa170758e2085c94bd91523ec8f8328c8c Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Thu, 26 Aug 2021 13:09:23 +0700
Subject: [PATCH] :bug: bug: caroucel

:%s
---
 pages/index.tsx                               |  4 +++
 .../common/CarouselCommon/CarouselCommon.tsx  | 32 +++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index e769be751..32db40959 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -87,6 +87,10 @@ export default function Home() {
   return (
     <>
       <ProductCaroucel data={dataTest} itemKey="product-1" isDot={true}/>
+      <div>
+        <FeaturedProductCard title="Sale 25% Coffee Bean" subTitle="50 first Orders within a day" price="$15.00" originPrice="$20.00" imageSrc={image9.src} />
+        <RecipeCard title="Sale 25% Coffee Bean" imageSrc={image12.src} description="Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients.  To make this pho soup recipe, you will need:" />
+      </div>
     </>
   )
 }
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index ab9f688c7..570fac52a 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -35,27 +35,39 @@ const CarouselCommon = <T,>({
     slidesPerView,
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
+      let dot = 0 
+      dotArr.forEach((index)=>{
+        if(s.details().relativeSlide >= Math.floor(index)){
+          dot = index
+        }
+      })
+      setDotActive(dot)
     },
   })
+  
+  useEffect(() => {
+    if(isDot && slider){
+      // console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
+      let array:number[]
+      array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
+        return (Number(slider.details().slidesPerView)||1)*i
+      })
+      
+      setDotArr(array)
+    }
+  }, [isDot,slider])
+
   const handleRightArrowClick = () => {
     slider.next()
   }
 
-  useEffect(() => {
-    if(isDot && slider){
-      console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
-      setDotArr([...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()])
-    }
-  }, [isDot,slider])
-
   const handleLeftArrowClick = () => {
     slider.prev()
   }
 
   const onDotClick = (index:number) => {
-    slider.moveToSlide(((Number(slider.details().slidesPerView)||1)*index))
-    setDotActive(index)
-
+    slider.moveToSlideRelative(Math.floor(index))
+    // setDotActive(index)
   }
   return (
     <div className={s.navigationWrapper}>