Vertical Scroll Area Base Demo

1import * as React from "react";
2import { ScrollArea } from "@/registry/base-ui/scroll-area";
3
4import { Separator } from "@/components/ui/separator";
5
6const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
7
8export function ScrollAreaDemo() {
9  return (
10    <ScrollArea className="bg-background h-72 w-48 rounded-md border">
11      <div className="p-4">
12        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
13        {tags.map((tag) => (
14          <React.Fragment key={tag}>
15            <div className="text-sm">{tag}</div>
16            <Separator className="my-2" />
17          </React.Fragment>
18        ))}
19      </div>
20    </ScrollArea>
21  );
22}