Carousel

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