Carousel

1"use client";
2 
3import * as React from "react";
4import useEmblaCarousel, {
5  type UseEmblaCarouselType,
6} from "embla-carousel-react";
7import { ArrowLeft, ArrowRight } from "lucide-react";
8 
9import { cn } from "@/lib/utils";
10import { Button } from "@/registry/components/ui/button";
11 
12type CarouselApi = UseEmblaCarouselType[1];
13type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
14type CarouselOptions = UseCarouselParameters[0];
15type CarouselPlugin = UseCarouselParameters[1];
16 
17type CarouselProps = {
18  opts?: CarouselOptions;
19  plugins?: CarouselPlugin;
20  orientation?: "horizontal" | "vertical";
21  setApi?: (api: CarouselApi) => void;
22};
23 
24type CarouselContextProps = {
25  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
26  api: ReturnType<typeof useEmblaCarousel>[1];
27  scrollPrev: () => void;
28  scrollNext: () => void;
29  canScrollPrev: boolean;
30  canScrollNext: boolean;
31} & CarouselProps;
32 
33const CarouselContext = React.createContext<CarouselContextProps | null>(null);
34 
35function useCarousel() {
36  const context = React.useContext(CarouselContext);
37 
38  if (!context) {
39    throw new Error("useCarousel must be used within a <Carousel />");
40  }
41 
42  return context;
43}
44 
45function Carousel({
46  orientation = "horizontal",
47  opts,
48  setApi,
49  plugins,
50  className,
51  children,
52  ...props
53}: React.ComponentProps<"div"> & CarouselProps) {
54  const [carouselRef, api] = useEmblaCarousel(
55    {
56      ...opts,
57      axis: orientation === "horizontal" ? "x" : "y",
58    },
59    plugins
60  );
61  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
62  const [canScrollNext, setCanScrollNext] = React.useState(false);
63 
64  const onSelect = React.useCallback((api: CarouselApi) => {
65    if (!api) return;
66    setCanScrollPrev(api.canScrollPrev());
67    setCanScrollNext(api.canScrollNext());
68  }, []);
69 
70  const scrollPrev = React.useCallback(() => {
71    api?.scrollPrev();
72  }, [api]);
73 
74  const scrollNext = React.useCallback(() => {
75    api?.scrollNext();
76  }, [api]);
77 
78  const handleKeyDown = React.useCallback(
79    (event: React.KeyboardEvent<HTMLDivElement>) => {
80      if (event.key === "ArrowLeft") {
81        event.preventDefault();
82        scrollPrev();
83      } else if (event.key === "ArrowRight") {
84        event.preventDefault();
85        scrollNext();
86      }
87    },
88    [scrollPrev, scrollNext]
89  );
90 
91  React.useEffect(() => {
92    if (!api || !setApi) return;
93    setApi(api);
94  }, [api, setApi]);
95 
96  React.useEffect(() => {
97    if (!api) return;
98    onSelect(api);
99// … truncated