Carousel

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