Carousel

1"use client";
2
3import { ComponentProps, KeyboardEvent, createContext, useCallback, useContext, useEffect, useState } from "react";
4
5import useEmblaCarousel, {
6  type UseEmblaCarouselType
7} from "embla-carousel-react";
8
9import { cn } from "@/lib/utils";
10import { Button } from "@/components/ui/button";
11import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
12
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 = createContext<CarouselContextProps | null>(null);
35
36function useCarousel() {
37  const context = 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}: 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] = useState(false);
63  const [canScrollNext, setCanScrollNext] = useState(false);
64
65  const onSelect = useCallback((api: CarouselApi) => {
66    if (!api) return;
67    setCanScrollPrev(api.canScrollPrev());
68    setCanScrollNext(api.canScrollNext());
69  }, []);
70
71  const scrollPrev = useCallback(() => {
72    api?.scrollPrev();
73  }, [api]);
74
75  const scrollNext = useCallback(() => {
76    api?.scrollNext();
77  }, [api]);
78
79  const handleKeyDown = useCallback(
80    (event: 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  useEffect(() => {
93    if (!api || !setApi) return;
94// … truncated