Carousel

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