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 { Button } from "@/components/ui/button"
10 
11import { cn } from "@/lib/utils"
12 
13type CarouselApi = UseEmblaCarouselType[1]
14type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
15type CarouselOptions = UseCarouselParameters[0]
16type CarouselPlugin = UseCarouselParameters[1]
17 
18type CarouselProps = {
19	opts?: CarouselOptions
20	plugins?: CarouselPlugin
21	orientation?: "horizontal" | "vertical"
22	setApi?: (api: CarouselApi) => void
23}
24 
25type CarouselContextProps = {
26	carouselRef: ReturnType<typeof useEmblaCarousel>[0]
27	api: ReturnType<typeof useEmblaCarousel>[1]
28	scrollPrev: () => void
29	scrollNext: () => void
30	canScrollPrev: boolean
31	canScrollNext: boolean
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 
46function Carousel({
47	orientation = "horizontal",
48	opts,
49	setApi,
50	plugins,
51	className,
52	children,
53	...props
54}: React.ComponentProps<"div"> & CarouselProps) {
55	const [carouselRef, api] = useEmblaCarousel(
56		{
57			...opts,
58			axis: orientation === "horizontal" ? "x" : "y",
59		},
60		plugins
61	)
62	const [canScrollPrev, setCanScrollPrev] = React.useState(false)
63	const [canScrollNext, setCanScrollNext] = React.useState(false)
64 
65	const onSelect = React.useCallback((api: CarouselApi) => {
66		if (!api) return
67		setCanScrollPrev(api.canScrollPrev())
68		setCanScrollNext(api.canScrollNext())
69	}, [])
70 
71	const scrollPrev = React.useCallback(() => {
72		api?.scrollPrev()
73	}, [api])
74 
75	const scrollNext = React.useCallback(() => {
76		api?.scrollNext()
77	}, [api])
78 
79	const handleKeyDown = React.useCallback(
80		(event: React.KeyboardEvent<HTMLDivElement>) => {
81			if (event.key === "ArrowLeft") {
82				event.preventDefault()
83				scrollPrev()
84			} else if (event.key === "ArrowRight") {
85				event.preventDefault()
86				scrollNext()
87			}
88		},
89		[scrollPrev, scrollNext]
90	)
91 
92	React.useEffect(() => {
93		if (!api || !setApi) return
94		setApi(api)
95	}, [api, setApi])
96 
97	React.useEffect(() => {
98		if (!api) return
99		onSelect(api)
100		api.on("reInit", onSelect)
101		api.on("select", onSelect)
102 
103		return () => {
104			api?.off("select", onSelect)
105		}
106	}, [api, onSelect])
107 
108	return (
109// … truncated