Scroll Area

1import * as React from "react"
2import Image from "next/image"
3 
4import {
5  Example,
6  ExampleWrapper,
7} from "@/registry/base-vega/components/example"
8import { ScrollArea, ScrollBar } from "@/registry/base-vega/ui/scroll-area"
9import { Separator } from "@/registry/base-vega/ui/separator"
10 
11const tags = Array.from({ length: 50 }).map(
12  (_, i, a) => `v1.2.0-beta.${a.length - i}`
13)
14 
15const works = [
16  {
17    artist: "Ornella Binni",
18    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
19  },
20  {
21    artist: "Tom Byrom",
22    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
23  },
24  {
25    artist: "Vladimir Malyav",
26    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
27  },
28] as const
29 
30export default function ScrollAreaExample() {
31  return (
32    <ExampleWrapper>
33      <ScrollAreaVertical />
34      <ScrollAreaHorizontal />
35    </ExampleWrapper>
36  )
37}
38 
39function ScrollAreaVertical() {
40  return (
41    <Example title="Vertical">
42      <ScrollArea className="mx-auto h-72 w-48 rounded-md border style-luma:rounded-2xl">
43        <div className="p-4">
44          <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
45          {tags.map((tag) => (
46            <React.Fragment key={tag}>
47              <div className="text-sm">{tag}</div>
48              <Separator className="my-2" />
49            </React.Fragment>
50          ))}
51        </div>
52      </ScrollArea>
53    </Example>
54  )
55}
56 
57function ScrollAreaHorizontal() {
58  return (
59    <Example title="Horizontal">
60      <ScrollArea className="mx-auto w-full max-w-96 rounded-md border p-4 style-luma:rounded-2xl">
61        <div className="flex gap-4">
62          {works.map((artwork) => (
63            <figure key={artwork.artist} className="shrink-0">
64              <div className="overflow-hidden rounded-md">
65                <Image
66                  src={artwork.art}
67                  alt={`Photo by ${artwork.artist}`}
68                  className="aspect-[3/4] h-fit w-fit object-cover"
69                  width={300}
70                  height={400}
71                />
72              </div>
73              <figcaption className="pt-2 text-xs text-muted-foreground">
74                Photo by{" "}
75                <span className="font-semibold text-foreground">
76                  {artwork.artist}
77                </span>
78              </figcaption>
79            </figure>
80          ))}
81        </div>
82// … truncated