diff --git a/src/components/ui/LoopCarousel.tsx b/src/components/ui/LoopCarousel.tsx index 80967de..e69de29 100644 --- a/src/components/ui/LoopCarousel.tsx +++ b/src/components/ui/LoopCarousel.tsx @@ -1,76 +0,0 @@ -import { Children, useCallback, useEffect, useState, type ReactNode } from "react"; -import useEmblaCarousel from "embla-carousel-react"; -import type { EmblaCarouselType } from "embla-carousel"; -import { ChevronLeft, ChevronRight } from "lucide-react"; -import { cls } from "@/lib/utils"; - -interface LoopCarouselProps { - children: ReactNode; -} - -const LoopCarousel = ({ children }: LoopCarouselProps) => { - const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center", containScroll: "trimSnaps" }); - const [selectedIndex, setSelectedIndex] = useState(0); - - const items = Children.toArray(children); - - const onSelect = useCallback((api: EmblaCarouselType) => { - setSelectedIndex(api.selectedScrollSnap()); - }, []); - - const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]); - const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]); - - useEffect(() => { - if (!emblaApi) return; - - onSelect(emblaApi); - emblaApi.on("select", onSelect).on("reInit", onSelect); - - return () => { - emblaApi.off("select", onSelect).off("reInit", onSelect); - }; - }, [emblaApi, onSelect]); - - return ( -