Carousel

1
import type { ButtonProps } from "~/components/ui/button";
2
import type { CreateEmblaCarouselType } from "embla-carousel-solid";
3
import type { Accessor, Component, ComponentProps, VoidProps } from "solid-js";
4

5
import {
6
  createContext,
7
  createEffect,
8
  createMemo,
9
  createSignal,
10
  mergeProps,
11
  splitProps,
12
  useContext,
13
} from "solid-js";
14
import createEmblaCarousel from "embla-carousel-solid";
15
import ArrowLeftIcon from "lucide-solid/icons/arrow-left";
16
import ArrowRightIcon from "lucide-solid/icons/arrow-right";
17

18
import { Button } from "~/components/ui/button";
19
import { cn } from "~/lib/utils";
20

21
export type CarouselApi = CreateEmblaCarouselType[1];
22

23
type UseCarouselParameters = Parameters<typeof createEmblaCarousel>;
24
type CarouselOptions = NonNullable<UseCarouselParameters[0]>;
25
type CarouselPlugin = NonNullable<UseCarouselParameters[1]>;
26

27
type CarouselProps = {
28
  opts?: ReturnType<CarouselOptions>;
29
  plugins?: ReturnType<CarouselPlugin>;
30
  orientation?: "horizontal" | "vertical";
31
  setApi?: (api: CarouselApi) => void;
32
};
33

34
type CarouselContextProps = {
35
  carouselRef: ReturnType<typeof createEmblaCarousel>[0];
36
  api: ReturnType<typeof createEmblaCarousel>[1];
37
  scrollPrev: () => void;
38
  scrollNext: () => void;
39
  canScrollPrev: Accessor<boolean>;
40
  canScrollNext: Accessor<boolean>;
41
} & CarouselProps;
42

43
const CarouselContext = createContext<Accessor<CarouselContextProps> | null>(
44
  null,
45
);
46

47
const useCarousel = () => {
48
  const context = useContext(CarouselContext);
49

50
  if (!context) {
51
    throw new Error("useCarousel must be used within a <Carousel />");
52
  }
53

54
  return context();
55
};
56

57
const Carousel: Component<CarouselProps & ComponentProps<"div">> = (
58
  rawProps,
59
) => {
60
  const props = mergeProps<(CarouselProps & ComponentProps<"div">)[]>(
61
    { orientation: "horizontal" },
62
    rawProps,
63
  );
64

65
  const [local, others] = splitProps(props, [
66
    "orientation",
67
    "opts",
68
    "setApi",
69
    "plugins",
70
    "class",
71
    "children",
72
  ]);
73

74
  const [carouselRef, api] = createEmblaCarousel(
75
    () => ({
76
      ...local.opts,
77
      axis: local.orientation === "horizontal" ? "x" : "y",
78
    }),
79
    () => (local.plugins === undefined ? [] : local.plugins),
80
  );
81
  const [canScrollPrev, setCanScrollPrev] = createSignal(false);
82
  const [canScrollNext, setCanScrollNext] = createSignal(false);
83

84
  const onSelect = (api: NonNullable<ReturnType<CarouselApi>>) => {
85
    setCanScrollPrev(api.canScrollPrev());
86
    setCanScrollNext(api.canScrollNext());
87
  };
88

89
  const scrollPrev = () => {
90
    api()?.scrollPrev();
91
  };
92

93
  const scrollNext = () => {
94
    api()?.scrollNext();
95
  };
96

97
  const handleKeyDown = (event: KeyboardEvent) => {
98
    if (event.key === "ArrowLeft") {
99
      event.preventDefault();
100
      scrollPrev();
101
    } else if (event.key === "ArrowRight") {
102
      event.preventDefault();
103
      scrollNext();
104
    }
105
  };
106

107
  createEffect(() => {
108
    if (!api() || !local.setApi) {
109
      return;
110
    }
111
    local.setApi(api);
112
  });
113

114
  createEffect(() => {
115
    if (!api()) {
116
      return;
117
    }
118

119
    onSelect(api()!);
120
    api()!.on("reInit", onSelect);
121
    api()!.on("select", onSelect);
122

123
    return () => {
124
      api()?.off("select", onSelect);
125
    };
126
  });
127

128
  const value = createMemo(
129
    () =>
130
      ({
131
        carouselRef,
132
        api,
133
        opts: local.opts,
134
        orientation:
135
          local.orientation ||
136
          (local.opts?.axis === "y" ? "vertical" : "horizontal"),
137
        scrollPrev,
138
        scrollNext,
139
        canScrollPrev,
140
        canScrollNext,
141
      }) satisfies CarouselContextProps,
142
  );
143

144
  return (
145
    <CarouselContext.Provider value={value}>
146
      <div
147
        data-slot="carousel"
148
        onKeyDown={handleKeyDown}
149
        class={cn("relative", local.class)}
150
        role="region"
151
        aria-roledescription="carousel"
152
        {...others}
153
      >
154
        {local.children}
155
      </div>
156
    </CarouselContext.Provider>
157
  );
158
};
159

160
const CarouselContent: Component<ComponentProps<"div">> = (props) => {
161
  const [local, others] = splitProps(props, ["class"]);
162
  const { carouselRef, orientation } = useCarousel();
163

164
  return (
165
    <div data-slot="carousel-content" ref={carouselRef} class="overflow-hidden">
166
      <div
167
        class={cn(
168
          "flex",
169
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
170
          local.class,
171
        )}
172
        {...others}
173
      />
174
    </div>
175
  );
176
};
177

178
const CarouselItem: Component<ComponentProps<"div">> = (props) => {
179
  const [local, others] = splitProps(props, ["class"]);
180
  const { orientation } = useCarousel();
181

182
  return (
183
    <div
184
      data-slot="carousel-item"
185
      role="group"
186
      aria-roledescription="slide"
187
      class={cn(
188
        "min-w-0 shrink-0 grow-0 basis-full",
189
        orientation === "horizontal" ? "pl-4" : "pt-4",
190
        local.class,
191
      )}
192
      {...others}
193
    />
194
  );
195
};
196

197
type CarouselButtonProps = VoidProps<ButtonProps>;
198

199
const CarouselPrevious: Component<CarouselButtonProps> = (rawProps) => {
200
  const props = mergeProps<CarouselButtonProps[]>(
201
    { variant: "no-shadow", size: "icon" },
202
    rawProps,
203
  );
204
  const [local, others] = splitProps(props, ["class", "variant", "size"]);
205
  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
206

207
  return (
208
    <Button
209
      data-slot="carousel-previous"
210
      variant={local.variant}
211
      size={local.size}
212
      class={cn(
213
        "absolute size-8 touch-manipulation rounded-full",
214
        orientation === "horizontal"
215
          ? "top-1/2 -left-12 -translate-y-1/2"
216
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
217
        local.class,
218
      )}
219
      disabled={!canScrollPrev()}
220
      onClick={scrollPrev}
221
      {...others}
222
    >
223
      <ArrowLeftIcon class="size-4" />
224
      <span class="sr-only">Previous slide</span>
225
    </Button>
226
  );
227
};
228

229
const CarouselNext: Component<CarouselButtonProps> = (rawProps) => {
230
  const props = mergeProps<CarouselButtonProps[]>(
231
    { variant: "no-shadow", size: "icon" },
232
    rawProps,
233
  );
234
  const [local, others] = splitProps(props, ["class", "variant", "size"]);
235
  const { orientation, scrollNext, canScrollNext } = useCarousel();
236

237
  return (
238
    <Button
239
      data-slot="carousel-next"
240
      variant={local.variant}
241
      size={local.size}
242
      class={cn(
243
        "absolute size-8 touch-manipulation rounded-full",
244
        orientation === "horizontal"
245
          ? "top-1/2 -right-12 -translate-y-1/2"
246
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
247
        local.class,
248
      )}
249
      disabled={!canScrollNext()}
250
      onClick={scrollNext}
251
      {...others}
252
    >
253
      <ArrowRightIcon class="size-4" />
254
      <span class="sr-only">Next slide</span>
255
    </Button>
256
  );
257
};
258

259
export {
260
  Carousel,
261
  CarouselContent,
262
  CarouselItem,
263
  CarouselPrevious,
264
  CarouselNext,
265
};