Scroll Area

1
import { For } from "solid-js";
2
import { ScrollArea } from "~/components/ui/scroll-area";
3
import { Separator } from "~/components/ui/separator";
4

5
const tags = Array.from({ length: 50 }).map(
6
  (_, index, array) => `v1.2.0-beta.${array.length - index}`,
7
);
8

9
export default function ScrollAreaDemo() {
10
  return (
11
    <ScrollArea class="h-72 w-48 rounded-md border">
12
      <div class="p-4">
13
        <h4 class="mb-4 font-medium text-sm leading-none">Tags</h4>
14
        <For each={tags}>
15
          {(tag) => (
16
            <>
17
              <div class="text-sm">{tag}</div>
18
              <Separator class="my-2" />
19
            </>
20
          )}
21
        </For>
22
      </div>
23
    </ScrollArea>
24
  );
25
}

1
/** biome-ignore-all lint/a11y/noRedundantAlt: upstream demo describes each photograph */
2
import { For } from "solid-js";
3
import { ScrollArea, ScrollBar } from "~/components/ui/scroll-area";
4

5
const artworks = [
6
  {
7
    artist: "Ornella Binni",
8
    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
9
  },
10
  {
11
    artist: "Tom Byrom",
12
    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
13
  },
14
  {
15
    artist: "Vladimir Malyavko",
16
    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
17
  },
18
] as const;
19

20
export default function ScrollAreaHorizontalDemo() {
21
  return (
22
    <ScrollArea class="w-96 rounded-md border whitespace-nowrap">
23
      <div class="flex w-max space-x-4 p-4">
24
        <For each={artworks}>
25
          {(artwork) => (
26
            <figure class="shrink-0">
27
              <div class="overflow-hidden rounded-md">
28
                <img
29
                  src={artwork.art}
30
                  alt={`Photo by ${artwork.artist}`}
31
                  class="aspect-[3/4] h-fit w-fit object-cover"
32
                  width={300}
33
                  height={400}
34
                />
35
              </div>
36
              <figcaption class="pt-2 text-xs text-muted-foreground">
37
                Photo by <span class="font-semibold text-foreground">{artwork.artist}</span>
38
              </figcaption>
39
            </figure>
40
          )}
41
        </For>
42
      </div>
43
      <ScrollBar orientation="horizontal" />
44
    </ScrollArea>
45
  );
46
}