feat: Stop advancing if user presses one of the Carousel buttons

Author: trillium

packages/test-case-component/src/components/shikiComponent.tsx

@@ -80,32 +80,39 @@ const STEP_DURATIONS = [1500, 500, 1500]; // milliseconds
 
 function Carousel({ children }: { children: React.ReactNode[] }) {
   const [activeIndex, setActiveIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
 
   const handleNext = () => {
     setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
+    setPaused(true); // Pause on manual navigation
   };
 
   const handlePrev = () => {
     setActiveIndex((prevIndex) =>
       prevIndex === 0 ? children.length - 1 : prevIndex - 1,
     );
+    setPaused(true); // Pause on manual navigation
   };
 
   const handleIndicatorClick = (index: number) => {
     setActiveIndex(index);
+    setPaused(true); // Pause on manual navigation
   };
 
   const timeoutRef = useRef<any>(null);
 
   useEffect(() => {
+    if (paused) {
+      return; // Don't auto-rotate if paused
+    }
     const duration = STEP_DURATIONS[activeIndex] || 3000;
 
     timeoutRef.current = setTimeout(() => {
       setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
     }, duration);
 
     return () => clearTimeout(timeoutRef.current);
-  }, [activeIndex, children.length]);
+  }, [activeIndex, children.length, paused]);
 
   const CarouselItem = ({
     child,