Initial commit

src/components/cardStack/hooks/usePrevNextButtons.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+import { EmblaCarouselType } from "embla-carousel";
+
+export const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+    const onPrevButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollPrev();
+    }, [emblaApi]);
+
+    const onNextButtonClick = useCallback(() => {
+        if (!emblaApi) return;
+        emblaApi.scrollNext();
+    }, [emblaApi]);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setPrevBtnDisabled(!emblaApi.canScrollPrev());
+        setNextBtnDisabled(!emblaApi.canScrollNext());
+    }, []);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("reInit", onSelect).on("select", onSelect);
+
+        return () => {
+            emblaApi.off("reInit", onSelect).off("select", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    return {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    };
+};