Carousel

1"use client"
2 
3import * as React from "react"
4import useEmblaCarousel, {
5  type UseEmblaCarouselType,
6} from "embla-carousel-react"
7import { ArrowLeft, ArrowRight } from "lucide-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 
17type CarouselProps = {
18  opts?: CarouselOptions
19  plugins?: CarouselPlugin
20  orientation?: "horizontal" | "vertical"
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 = React.createContext<CarouselContextProps | null>(null)
34 
35function useCarousel() {
36  const context = React.useContext(CarouselContext)
37 
38  if (!context) {
39    throw new Error("useCarousel must be used within a <Carousel />")
40  }
41 
42  return context
43}
44 
45function 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] = React.useState(false)
62  const [canScrollNext, setCanScrollNext] = React.useState(false)
63 
64  const onSelect = React.useCallback((api: CarouselApi) => {
65    if (!api) return
66    setCanScrollPrev(api.canScrollPrev())
67    setCanScrollNext(api.canScrollNext())
68  }, [])
69 
70  const scrollPrev = React.useCallback(() => {
71    api?.scrollPrev()
72  }, [api])
73 
74  const scrollNext = React.useCallback(() => {
75    api?.scrollNext()
76  }, [api])
77 
78  const handleKeyDown = React.useCallback(
79    (event: React.KeyboardEvent<HTMLDivElement>) => {
80      if (event.key === "ArrowLeft") {
81        event.preventDefault()
82        scrollPrev()
83      } else if (event.key === "ArrowRight") {
84        event.preventDefault()
85        scrollNext()
86      }
87    },
88    [scrollPrev, scrollNext]
89  )
90 
91  React.useEffect(() => {
92    if (!api || !setApi) return
93    setApi(api)
94  }, [api, setApi])
95 
96  React.useEffect(() => {
97    if (!api) return
98    onSelect(api)
99    api.on("reInit", onSelect)
100    api.on("select", onSelect)
101 
102// … truncated