Carousel

1"use client";
2 
3import { ArrowLeft, ArrowRight } from "blode-icons-react";
4import useEmblaCarousel from "embla-carousel-react";
5import type { UseEmblaCarouselType } from "embla-carousel-react";
6import type * as React from "react";
7import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
8 
9import { cn } from "@/lib/utils";
10import { Button } from "@/components/ui/button";
11 
12type CarouselApi = UseEmblaCarouselType[1];
13type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
14type CarouselOptions = UseCarouselParameters[0];
15type CarouselPlugin = UseCarouselParameters[1];
16 
17interface CarouselProps {
18  opts?: CarouselOptions;
19  orientation?: "horizontal" | "vertical";
20  plugins?: CarouselPlugin;
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 = createContext<CarouselContextProps | null>(null);
34 
35const useCarousel = () => {
36  const context = useContext(CarouselContext);
37 
38  if (!context) {
39    throw new Error("useCarousel must be used within a <Carousel />");
40  }
41 
42  return context;
43};
44 
45const 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] = useState(false);
62  const [canScrollNext, setCanScrollNext] = useState(false);
63 
64  const onSelect = useCallback((emblaApi: CarouselApi) => {
65    if (!emblaApi) {
66      return;
67    }
68    setCanScrollPrev(emblaApi.canScrollPrev());
69    setCanScrollNext(emblaApi.canScrollNext());
70  }, []);
71 
72  const scrollPrev = useCallback(() => {
73    api?.scrollPrev();
74  }, [api]);
75 
76  const scrollNext = useCallback(() => {
77    api?.scrollNext();
78  }, [api]);
79 
80  const handleKeyDown = useCallback(
81    (event: React.KeyboardEvent<HTMLDivElement>) => {
82      if (event.key === "ArrowLeft") {
83        event.preventDefault();
84        scrollPrev();
85      } else if (event.key === "ArrowRight") {
86        event.preventDefault();
87        scrollNext();
88      }
89    },
90    [scrollPrev, scrollNext],
91  );
92 
93  useEffect(() => {
94    if (!(api && setApi)) {
95// … truncated