Motion Carousel

1'use client';
2 
3import * as React from 'react';
4import { motion, type Transition } from 'motion/react';
5import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
6import useEmblaCarousel from 'embla-carousel-react';
7import { Button } from '@/components/animate-ui/components/buttons/button';
8import { ChevronRight, ChevronLeft } from 'lucide-react';
9 
10type PropType = {
11  slides: number[];
12  options?: EmblaOptionsType;
13};
14 
15type EmblaControls = {
16  selectedIndex: number;
17  scrollSnaps: number[];
18  prevDisabled: boolean;
19  nextDisabled: boolean;
20  onDotClick: (index: number) => void;
21  onPrev: () => void;
22  onNext: () => void;
23};
24 
25type DotButtonProps = {
26  selected?: boolean;
27  label: string;
28  onClick: () => void;
29};
30 
31const transition: Transition = {
32  type: 'spring',
33  stiffness: 240,
34  damping: 24,
35  mass: 1,
36};
37 
38const useEmblaControls = (
39  emblaApi: EmblaCarouselType | undefined,
40): EmblaControls => {
41  const [selectedIndex, setSelectedIndex] = React.useState(0);
42  const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([]);
43  const [prevDisabled, setPrevDisabled] = React.useState(true);
44  const [nextDisabled, setNextDisabled] = React.useState(true);
45 
46  const onDotClick = React.useCallback(
47    (index: number) => emblaApi?.scrollTo(index),
48    [emblaApi],
49  );
50 
51  const onPrev = React.useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
52  const onNext = React.useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
53 
54  const updateSelectionState = (api: EmblaCarouselType) => {
55    setSelectedIndex(api.selectedScrollSnap());
56    setPrevDisabled(!api.canScrollPrev());
57    setNextDisabled(!api.canScrollNext());
58  };
59 
60  const onInit = React.useCallback((api: EmblaCarouselType) => {
61    setScrollSnaps(api.scrollSnapList());
62    updateSelectionState(api);
63  }, []);
64 
65  const onSelect = React.useCallback((api: EmblaCarouselType) => {
66    updateSelectionState(api);
67  }, []);
68 
69  React.useEffect(() => {
70    if (!emblaApi) return;
71 
72    onInit(emblaApi);
73    emblaApi.on('reInit', onInit).on('select', onSelect);
74 
75    return () => {
76      emblaApi.off('reInit', onInit).off('select', onSelect);
77    };
78  }, [emblaApi, onInit, onSelect]);
79 
80  return {
81    selectedIndex,
82    scrollSnaps,
83    prevDisabled,
84    nextDisabled,
85    onDotClick,
86    onPrev,
87    onNext,
88  };
89};
90 
91function MotionCarousel(props: PropType) {
92  const { slides, options } = props;
93  const [emblaRef, emblaApi] = useEmblaCarousel(options);
94  const {
95    selectedIndex,
96    scrollSnaps,
97// … truncated