8-bit Card

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