added interval that automatically slides the feedback cards

src/components/Feedback/FeedbackCarousel.scss

@@ -123,9 +123,6 @@
   }
 }
 
-@media screen and (max-width: 992px) {
-}
-
 @media screen and (max-width: 375px) {
   #feedback-carousel {
     height: 358px;

src/components/Feedback/FeedbackCarousel.tsx

@@ -3,6 +3,7 @@ import { useSpringCarousel } from "react-spring-carousel";
 import type { FeedbackItem } from "./Feedback.astro";
 import useElementSize from "../../hooks/useElementSize";
 import "./FeedbackCarousel.scss";
+import { useInterval } from "../../hooks/useInterval";
 
 type FeedbackCarouselProps = {
   items: FeedbackItem[];
@@ -76,6 +77,9 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
   const size = useElementSize("feedback-carousel");
   const availableSpace = size ? Math.floor(size.width / 400) : 1;
   const itemsPerSlide = availableSpace > 4 ? 4 : availableSpace;
+  const [intervalDelay, setIntervalDelay] = useState<number | null>(
+    6000 * itemsPerSlide,
+  );
 
   useMemo(() => {
     setGroupedFeedback(groupArrayIntoChunks(items, itemsPerSlide || 1));
@@ -101,9 +105,20 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
     })),
   });
 
+  useInterval(() => {
+    if (activeSlide === groupedFeedback.length - 1) {
+      slideToItem(0);
+      setActiveSlide(0);
+    } else {
+      slideToItem(activeSlide + 1);
+      setActiveSlide(activeSlide + 1);
+    }
+  }, intervalDelay);
+
   useListenToCustomEvent((event: CarouselEvent) => {
     if (event.eventName === "onSlideStartChange") {
       setActiveSlide(event.nextItem.index);
+      setIntervalDelay(null); // Stop the interval
     }
   });
 
@@ -130,6 +145,7 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
               onClick={() => {
                 slideToItem(index);
                 setActiveSlide(index);
+                setIntervalDelay(null); // Stop the interval
               }}
             >
               <div className="feedback-carousel__dot" />

src/hooks/useInterval.tsx

@@ -0,0 +1,25 @@
+// shamelessly stolen from usehooks-ts: https://usehooks-ts.com/react-hook/use-interval
+
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}