carousel

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