ScrollArea

import { Panel, ScrollArea } from "density-base-ui";

const logEntries = [
  "Fetched project metadata",
  "Generated theme variables",
  "Rendered preview bundle",
  "Checked component docs",
  "Uploaded static assets",
  "Prepared release notes",
  "Queued deployment",
  "Synced dashboard cache",
];

export default function ScrollAreaExample() {
  return (
    <Panel>
      <ScrollArea style={{ height: 180, width: 320 }}>
        <div style={{ display: "grid", gap: "0.5rem", paddingRight: "1rem" }}>
          {logEntries.map((entry, index) => (
            <div
              key={entry}
              style={{
                border: "1px solid var(--dn-color-border)",
                borderRadius: "var(--dn-radius-control)",
                padding: "0.625rem 0.75rem",
              }}
            >
              {index + 1}. {entry}
            </div>
          ))}
        </div>
      </ScrollArea>
    </Panel>
  );
}