Carousel

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