ScrollArea

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  ScrollArea
} from "@pimolu/react";

const items = Array.from(
  { length: 14 },
  (_, index) => ({
    title: `Release ${14 - index}`,
    meta: `2026-10-${String(19 - index).padStart(2, "0")}`,
  })
);

export function DemoExample() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Releases</CardTitle>
        <CardDescription>Fourteen rows in a 260px viewport.</CardDescription>
      </CardHeader>
      <CardContent>
        <ScrollArea maxHeight={260}>
          <div className="grid gap-5 min-w-0">
            {
              items.map((item) => (<div
                key={item.title}
                className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
              >
                <span>{item.title}</span>
                <span className="text-sm text-muted leading-relaxed">{item.meta}</span>
              </div>))
            }
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}