Carousel

1import { ChevronLeft, ChevronRight } from "lucide-solid";
2import type { Component, JSX } from "solid-js";
3import { createContext, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
4import { cn } from "~/lib/utils";
5import { Button } from "./button";
6 
7type CarouselOrientation = "horizontal" | "vertical";
8 
9interface CarouselContext {
10  orientation: CarouselOrientation;
11  scrollPrev: () => void;
12  scrollNext: () => void;
13  canScrollPrev: () => boolean;
14  canScrollNext: () => boolean;
15}
16 
17const CarouselContext = createContext<CarouselContext>({
18  orientation: "horizontal",
19  scrollPrev: () => {},
20  scrollNext: () => {},
21  canScrollPrev: () => false,
22  canScrollNext: () => false,
23});
24 
25export const useCarousel = () => useContext(CarouselContext);
26 
27export type CarouselProps = {
28  orientation?: CarouselOrientation;
29  opts?: { loop?: boolean };
30  class?: string;
31  children?: JSX.Element;
32};
33 
34export const Carousel: Component<CarouselProps> = (props) => {
35  const [local] = splitProps(props, ["class", "orientation", "opts", "children"]);
36  let containerRef!: HTMLDivElement;
37  const [canScrollPrev, setCanScrollPrev] = createSignal(false);
38  const [canScrollNext, setCanScrollNext] = createSignal(true);
39  const orientation = () => local.orientation ?? "horizontal";
40 
41  const updateScrollState = () => {
42    if (!containerRef) return;
43    const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } =
44      containerRef;
45    if (orientation() === "horizontal") {
46      setCanScrollPrev(scrollLeft > 0);
47      setCanScrollNext(Math.round(scrollLeft + clientWidth) < scrollWidth);
48    } else {
49      setCanScrollPrev(scrollTop > 0);
50      setCanScrollNext(Math.round(scrollTop + clientHeight) < scrollHeight);
51    }
52  };
53 
54  const scrollPrev = () => {
55    if (!containerRef) return;
56    const amount =
57      orientation() === "horizontal" ? -containerRef.clientWidth : -containerRef.clientHeight;
58    containerRef.scrollBy({
59      left: orientation() === "horizontal" ? amount : 0,
60      top: orientation() === "vertical" ? amount : 0,
61      behavior: "smooth",
62    });
63  };
64 
65  const scrollNext = () => {
66    if (!containerRef) return;
67    const amount =
68      orientation() === "horizontal" ? containerRef.clientWidth : containerRef.clientHeight;
69    containerRef.scrollBy({
70      left: orientation() === "horizontal" ? amount : 0,
71      top: orientation() === "vertical" ? amount : 0,
72      behavior: "smooth",
73    });
74  };
75 
76  onMount(() => {
77// … truncated