From a41c6fb55df6c9db45fa49b6eacbef74b5eabd02 Mon Sep 17 00:00:00 2001
From: Achraf Hmimou <aacraaf@gmail.com>
Date: Thu, 4 Apr 2024 23:21:42 +0200
Subject: [PATCH] fix dot button autoscroll animation

---
 .../ThroughTheYears/EmblaCarousel.tsx         |  8 ++++++-
 .../EmblaCarouselDotButton.tsx                | 23 +------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx
index 22b8f6d..1744155 100644
--- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx
+++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx
@@ -204,7 +204,13 @@ const EmblaCarousel: React.FC<PropType> = ({ slides, options }) => {
           {scrollSnaps.map((_, index) => (
             <DotButton
               key={index}
-              onClick={() => onDotButtonClick(index)}
+              onClick={() => {
+                onDotButtonClick(index);
+                const autoScroll = emblaApi?.plugins()?.autoScroll;
+                if (autoScroll && typeof autoScroll.stop === "function") {
+                  autoScroll.stop();
+                }
+              }}
               selectedIndex={selectedIndex === index}
             />
           ))}
diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx
index c5dea5a..0f6159e 100644
--- a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx
+++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx
@@ -65,14 +65,11 @@ type PropType = PropsWithChildren<
 const EmblaDot = styled.button<{ selectedIndex: boolean }>`
   appearance: none;
   touch-action: manipulation;
-  display: inline-flex;
   text-decoration: none;
   cursor: url("/rocket-fire.png"), auto;
   border: 0;
   padding: 0.6rem;
   margin: 0.1rem;
-  width: 1.0rem;
-  height: 1.0rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80,27 +77,10 @@ const EmblaDot = styled.button<{ selectedIndex: boolean }>`
   position: relative;
   user-select: none;
   outline: none;
-  
-  
+
   background-color: ${(props) => {
     return props.selectedIndex ? "orangered" : "slategray";
   }};
-
- 
-}
-
-
-&::after {
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 `;
 
 export const DotButton: React.FC<PropType> = ({
@@ -108,7 +88,6 @@ export const DotButton: React.FC<PropType> = ({
   children,
   ...restProps
 }) => {
-  // Extract the selectedIndex prop and pass the rest of the props to the styled component
   return (
     <EmblaDot selectedIndex={selectedIndex} {...restProps}>
       {children}