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 "@/registry/new-york/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 
45const Carousel = React.forwardRef<
46  HTMLDivElement,
47  React.HTMLAttributes<HTMLDivElement> & CarouselProps
48>(
49  (
50    {
51      orientation = "horizontal",
52      opts,
53      setApi,
54      plugins,
55      className,
56      children,
57      ...props
58    },
59    ref
60  ) => {
61    const [carouselRef, api] = useEmblaCarousel(
62      {
63        ...opts,
64        axis: orientation === "horizontal" ? "x" : "y",
65      },
66      plugins
67    )
68    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
69    const [canScrollNext, setCanScrollNext] = React.useState(false)
70 
71    const onSelect = React.useCallback((api: CarouselApi) => {
72      if (!api) {
73        return
74      }
75 
76      setCanScrollPrev(api.canScrollPrev())
77      setCanScrollNext(api.canScrollNext())
78    }, [])
79 
80    const scrollPrev = React.useCallback(() => {
81      api?.scrollPrev()
82    }, [api])
83 
84    const scrollNext = React.useCallback(() => {
85      api?.scrollNext()
86    }, [api])
87 
88    const handleKeyDown = React.useCallback(
89      (event: React.KeyboardEvent<HTMLDivElement>) => {
90        if (event.key === "ArrowLeft") {
91          event.preventDefault()
92          scrollPrev()
93        } else if (event.key === "ArrowRight") {
94          event.preventDefault()
95          scrollNext()
96        }
97      },
98      [scrollPrev, scrollNext]
99    )
100 
101    React.useEffect(() => {
102// … truncated