MicroClub Carousel

1'use client';
2 
3import * as React from 'react';
4import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
5import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
6 
7import { cn } from '@/lib/utils';
8import { McButton } from '@/components/ui/mc-button';
9 
10type McCarouselApi = UseEmblaCarouselType[1];
11type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
12type CarouselOptions = UseCarouselParameters[0];
13type CarouselPlugin = UseCarouselParameters[1];
14 
15type CarouselProps = {
16  opts?: CarouselOptions;
17  plugins?: CarouselPlugin;
18  orientation?: 'horizontal' | 'vertical';
19  setApi?: (api: McCarouselApi) => void;
20};
21 
22type CarouselContextProps = {
23  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
24  api: ReturnType<typeof useEmblaCarousel>[1];
25  scrollPrev: () => void;
26  scrollNext: () => void;
27  canScrollPrev: boolean;
28  canScrollNext: boolean;
29} & CarouselProps;
30 
31const McCarouselContext = React.createContext<CarouselContextProps | null>(null);
32 
33function useMcCarousel() {
34  const context = React.useContext(McCarouselContext);
35 
36  if (!context) {
37    throw new Error('useMcCarousel must be used within a <McCarousel />');
38  }
39 
40  return context;
41}
42 
43function McCarousel({
44  orientation = 'horizontal',
45  opts,
46  setApi,
47  plugins,
48  className,
49  children,
50  ...props
51}: React.ComponentProps<'div'> & CarouselProps) {
52  const [carouselRef, api] = useEmblaCarousel(
53    {
54      ...opts,
55      axis: orientation === 'horizontal' ? 'x' : 'y',
56    },
57    plugins
58  );
59  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
60  const [canScrollNext, setCanScrollNext] = React.useState(false);
61 
62  const onSelect = React.useCallback((api: McCarouselApi) => {
63    if (!api) return;
64    setCanScrollPrev(api.canScrollPrev());
65    setCanScrollNext(api.canScrollNext());
66  }, []);
67 
68  const scrollPrev = React.useCallback(() => {
69    api?.scrollPrev();
70  }, [api]);
71 
72  const scrollNext = React.useCallback(() => {
73    api?.scrollNext();
74  }, [api]);
75 
76  const handleKeyDown = React.useCallback(
77    (event: React.KeyboardEvent<HTMLDivElement>) => {
78      if (event.key === 'ArrowLeft') {
79        event.preventDefault();
80        scrollPrev();
81      } else if (event.key === 'ArrowRight') {
82        event.preventDefault();
83        scrollNext();
84      }
85    },
86    [scrollPrev, scrollNext]
87  );
88 
89  React.useEffect(() => {
90    if (!api || !setApi) return;
91    setApi(api);
92  }, [api, setApi]);
93 
94  React.useEffect(() => {
95    if (!api) return;
96// … truncated