Scroll Area

import { ScrollArea } from "@/ui/scroll-area";
import { Typography } from "@/ui/typography";
import { FileIcon } from "@/icons/*";

const TAGS = Array.from({ length: 58 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
export function ScrollAreaDemo() {
  return (
    <ScrollArea
      /* use color="" to changes thumb color only */
      color={{ thumb: "hsl(var(--muted-foreground))", track: "hsl(var(--muted))" }}
      className="rounded-md border p-4 data-[orientation=horizontal]:h-max data-[orientation=vertical]:h-72 data-[orientation=vertical]:w-48"
    >
      <Typography
        prose="h6"
        className="inline-flex min-w-max max-w-max items-center rounded-sm border border-constructive bg-constructive/30 px-1.5 py-1 leading-none text-constructive-emphasis group-data-[orientation=horizontal]/sa:mr-4 group-data-[orientation=vertical]/sa:mb-4"
      >
        Scrollbar area
      </Typography>
      {TAGS.map(tag => (
        <p
          key={tag}
          className="flex min-w-max items-center gap-3 border-muted text-sm text-muted-foreground group-data-[orientation=vertical]/sa:mt-2 group-data-[orientation=horizontal]/sa:border-l group-data-[orientation=vertical]/sa:border-b group-data-[orientation=horizontal]/sa:px-4 group-data-[orientation=vertical]/sa:py-1"
        >
          <FileIcon /> {tag}
        </p>
      ))}
    </ScrollArea>
  );
}