Carousel

1"use client";
2import * as React from "react";
3import useEmblaCarousel from "embla-carousel-react";
4 
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/optics/button";
7import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
8 
9const CarouselContext = React.createContext(null);
10 
11function useCarousel() {
12	const context = React.useContext(CarouselContext);
13 
14	if (!context) {
15		throw new Error("useCarousel must be used within a <Carousel />");
16	}
17 
18	return context;
19}
20 
21function Carousel({
22	orientation = "horizontal",
23	opts = {},
24	setApi = undefined,
25	plugins = [],
26	className = "",
27	children = null,
28	...props
29}) {
30	const [carouselRef, api] = useEmblaCarousel(
31		{
32			...opts,
33			axis: orientation === "horizontal" ? "x" : "y",
34		},
35		plugins,
36	);
37	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
38	const [canScrollNext, setCanScrollNext] = React.useState(false);
39 
40	const onSelect = React.useCallback((api) => {
41		if (!api) return;
42		setCanScrollPrev(api.canScrollPrev());
43		setCanScrollNext(api.canScrollNext());
44	}, []);
45 
46	const scrollPrev = React.useCallback(() => {
47		api?.scrollPrev();
48	}, [api]);
49 
50	const scrollNext = React.useCallback(() => {
51		api?.scrollNext();
52	}, [api]);
53 
54	const handleKeyDown = React.useCallback(
55		(event) => {
56			if (event.key === "ArrowLeft") {
57				event.preventDefault();
58				scrollPrev();
59			} else if (event.key === "ArrowRight") {
60				event.preventDefault();
61				scrollNext();
62			}
63		},
64		[scrollPrev, scrollNext],
65	);
66 
67	React.useEffect(() => {
68		if (!api || !setApi) return;
69		setApi(api);
70	}, [api, setApi]);
71 
72	React.useEffect(() => {
73		if (!api) return;
74		onSelect(api);
75		api.on("reInit", onSelect);
76		api.on("select", onSelect);
77 
78		return () => {
79			api?.off("select", onSelect);
80		};
81	}, [api, onSelect]);
82 
83	return (
84		<CarouselContext.Provider
85			value={{
86				carouselRef,
87				api: api,
88				opts,
89				orientation:
90					orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
91				scrollPrev,
92				scrollNext,
93				canScrollPrev,
94				canScrollNext,
95			}}
96		>
97			<div
98				onKeyDownCapture={handleKeyDown}
99				className={cn("relative", className)}
100				role="region"
101				aria-roledescription="carousel"
102				data-slot="carousel"
103				{...props}
104			>
105				{children}
106			</div>
107		</CarouselContext.Provider>
108	);
109}
110 
111function CarouselContent({ className = "", ...props }) {
112	const { carouselRef, orientation } = useCarousel();
113 
114	return (
115		<div
116			ref={carouselRef}
117			className="overflow-hidden"
118// … truncated