carousel

1// deno-lint-ignore-file no-non-null-assertion
2import { cn } from "~/lib/utils.ts";
3import IconChevronLeft from "~icons/lucide/chevron-left";
4import IconChevronRight from "~icons/lucide/chevron-right";
5 
6import type { CreateEmblaCarouselType } from "embla-carousel-solid";
7 
8import createEmblaCarousel from "embla-carousel-solid";
9import type { Accessor, Component, ComponentProps, VoidProps } from "solid-js";
10import {
11  createContext,
12  createEffect,
13  createMemo,
14  createSignal,
15  mergeProps,
16  onCleanup,
17  splitProps,
18  useContext,
19} from "solid-js";
20import type { ButtonProps } from "./button.tsx";
21import { Button } from "./button.tsx";
22 
23export type CarouselApi = CreateEmblaCarouselType[1];
24 
25type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
26type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
27type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
28 
29type CarouselProps = {
30  opts?: ReturnType<CarouselOptions>;
31  plugins?: ReturnType<CarouselPlugin>;
32  orientation?: "horizontal" | "vertical";
33  setApi?: (api: CarouselApi) => void;
34};
35 
36type CarouselContextProps = {
37  carouselRef: ReturnType<typeof createEmblaCarousel>[0];
38  api: ReturnType<typeof createEmblaCarousel>[1];
39  scrollPrev: () => void;
40  scrollNext: () => void;
41  canScrollPrev: Accessor<boolean>;
42  canScrollNext: Accessor<boolean>;
43} & CarouselProps;
44 
45const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
46  null,
47);
48 
49const useCarousel = () => {
50  const context = useContext(CarouselContext);
51 
52  if (!context) {
53    throw new Error("useCarousel must be used within a <Carousel />");
54  }
55 
56  return context();
57};
58 
59const Carousel: Component<CarouselProps & ComponentProps<"div">> = (
60  rawProps,
61) => {
62  const props = mergeProps<(CarouselProps & ComponentProps<"div">)[]>(
63    { orientation: "horizontal" },
64    rawProps,
65  );
66 
67  const [local, others] = splitProps(props, [
68    "orientation",
69    "opts",
70    "setApi",
71    "plugins",
72    "class",
73    "children",
74  ]);
75 
76  const [carouselRef, api] = createEmblaCarousel(
77    () => ({
78      ...local.opts,
79      axis: local.orientation === "horizontal" ? "x" : "y",
80    }),
81    () => (local.plugins === undefined ? [] : local.plugins),
82  );
83  const [canScrollPrev, setCanScrollPrev] = createSignal(false);
84  const [canScrollNext, setCanScrollNext] = createSignal(false);
85 
86  const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
87    setCanScrollPrev(api.canScrollPrev());
88// … truncated