Carousel

1"use client";
2import { cn } from "@/lib/utils";
3import {
4  ChevronDown,
5  ChevronLeft,
6  ChevronRight,
7  ChevronUp,
8} from "lucide-react";
9import {
10  Children,
11  ReactNode,
12  createContext,
13  useCallback,
14  useContext,
15  useEffect,
16  useMemo,
17  useRef,
18  useState,
19} from "react";
20 
21export type CarouselContextType = {
22  index: number;
23  setIndex: (newIndex: number | ((prev: number) => number)) => void;
24  itemsCount: number;
25  setItemsCount: (newItemsCount: number) => void;
26  disableDrag: boolean;
27  loop: boolean;
28  orientation: "horizontal" | "vertical";
29};
30 
31const CarouselContext = createContext<CarouselContextType | undefined>(
32  undefined,
33);
34function useCarousel() {
35  const context = useContext(CarouselContext);
36  if (!context) {
37    throw new Error("useCarousel must be used within an CarouselProvider");
38  }
39  return context;
40}
41 
42export type CarouselProviderProps = {
43  children: ReactNode;
44  initialIndex?: number;
45  onIndexChange?: (newIndex: number) => void;
46  disableDrag?: boolean;
47  loop?: boolean;
48  orientation?: "horizontal" | "vertical";
49};
50 
51function CarouselProvider({
52  children,
53  initialIndex = 0,
54  onIndexChange,
55  disableDrag = false,
56  loop = false,
57  orientation = "horizontal",
58}: CarouselProviderProps) {
59  const [index, setIndex] = useState<number>(initialIndex);
60  const [itemsCount, setItemsCount] = useState<number>(0);
61 
62  const handleSetIndex = useCallback(
63    (newIndex: number | ((prev: number) => number)) => {
64      if (typeof newIndex === "function") {
65        setIndex((prev) => {
66          const next = newIndex(prev);
67          onIndexChange?.(next);
68          return next;
69        });
70      } else {
71        setIndex(newIndex);
72        onIndexChange?.(newIndex);
73      }
74    },
75    [onIndexChange],
76  );
77 
78  useEffect(() => {
79    setIndex(initialIndex);
80  }, [initialIndex]);
81 
82  const contextValue = useMemo(
83    () => ({
84      index,
85      setIndex: handleSetIndex,
86      itemsCount,
87      setItemsCount,
88      disableDrag,
89      loop,
90      orientation,
91    }),
92    [index, handleSetIndex, itemsCount, disableDrag, loop, orientation],
93  );
94 
95  return (
96    <CarouselContext.Provider value={contextValue}>
97      {children}
98    </CarouselContext.Provider>
99  );
100}
101 
102export type CarouselProps = {
103  children: ReactNode;
104  className?: string;
105  initialIndex?: number;
106  index?: number;
107  onIndexChange?: (newIndex: number) => void;
108  disableDrag?: boolean;
109  loop?: boolean;
110  orientation?: "horizontal" | "vertical";
111};
112 
113function Carousel({
114  children,
115// … truncated