Carousel

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