Carousel

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