Scroll Area

// A scroll area is a fixed-height box whose overflowing content
// scrolls vertically. Pure CSS (overflow-y: auto) — no client state.
const TAGS = Array.from({ length: 24 }, (_, i) => "v1.2.0-beta." + (i + 1));

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Scroll Area</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A viewport that scrolls its overflowing content.</p>
      <div style={{
        marginTop: 22, width: 260, height: 220, overflowY: "auto",
        border: "1px solid #e2e8f0", borderRadius: 12, background: "#fff", padding: 12,
      }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: "#64748b", padding: "0 4px 8px" }}>Tags</div>
        {TAGS.map((t, i) => (
          <div key={t} style={{ fontSize: 14, padding: "8px 4px", borderTop: i === 0 ? "none" : "1px solid #f1f5f9" }}>{t}</div>