"use client"; import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react"; import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"; import * as React from "react"; import { cn } from "#/src/utils/cn"; type CarouselApi = UseEmblaCarouselType[1]; type UseCarouselParameters = Parameters; type CarouselOptions = UseCarouselParameters[0]; type CarouselPlugin = UseCarouselParameters[1]; type CarouselProps = { opts?: CarouselOptions; plugins?: CarouselPlugin; orientation?: "horizontal" | "vertical"; setApi?: (api: CarouselApi) => void; }; type CarouselContextProps = { carouselRef: ReturnType[0]; api: ReturnType[1]; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; } & CarouselProps; const CarouselContext = React.createContext(null); function useCarousel() { const context = React.useContext(CarouselContext); if (!context) { throw new Error("useCarousel must be used within a "); } return context; } const Carousel = React.forwardRef< HTMLDivElement, React.HTMLAttributes & CarouselProps >( ( { orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref, ) => { const [carouselRef, emblaApi] = useEmblaCarousel( { ...opts, axis: orientation === "horizontal" ? "x" : "y", }, plugins, ); const [canScrollPrev, setCanScrollPrev] = React.useState(false); const [canScrollNext, setCanScrollNext] = React.useState(false); const onSelect = React.useCallback((api: CarouselApi) => { if (!api) { return; } setCanScrollPrev(api.canScrollPrev()); setCanScrollNext(api.canScrollNext()); }, []); const scrollPrev = React.useCallback(() => { emblaApi?.scrollPrev(); }, [emblaApi]); const scrollNext = React.useCallback(() => { emblaApi?.scrollNext(); }, [emblaApi]); const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (event.key === "ArrowLeft") { event.preventDefault(); scrollPrev(); } else if (event.key === "ArrowRight") { event.preventDefault(); scrollNext(); } }, [scrollPrev, scrollNext], ); React.useEffect(() => { if (!emblaApi || !setApi) { return; } setApi(emblaApi); }, [emblaApi, setApi]); React.useEffect(() => { if (!emblaApi) { return; } onSelect(emblaApi); emblaApi.on("reInit", onSelect); emblaApi.on("select", onSelect); return () => { emblaApi?.off("select", onSelect); }; }, [emblaApi, onSelect]); return (

{children}

); }, ); Carousel.displayName = "Carousel"; const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel(); return (

); }); CarouselContent.displayName = "CarouselContent"; const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useCarousel(); return (

); }); CarouselItem.displayName = "CarouselItem"; const CarouselDots = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { api } = useCarousel(); const [current, setCurrent] = React.useState(0); const [count, setCount] = React.useState(0); React.useEffect(() => { if (!api) { return; } setCount(api.scrollSnapList().length); setCurrent(api.selectedScrollSnap() + 1); api.on("select", () => { setCurrent(api.selectedScrollSnap() + 1); }); }, [api]); if (count === null) return null; return (

{count && Array.from({ length: count }).map((_, index) => ( ))}

); }); const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( ); }); CarouselPrevious.displayName = "CarouselPrevious"; const CarouselNext = React.forwardRef< HTMLButtonElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( ); }); CarouselNext.displayName = "CarouselNext"; export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };

Simple Carousel

Cylindric 3D Carousel