Carousel

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