Typography

const STYLES = [
  {
    name: "heading-xl",
    className: "text-heading-xl",
    spec: "24/30 · 600",
    sample: "TypeError",
    usage: "Detail page title. One per screen.",
  },
  {
    name: "heading-lg",
    className: "text-heading-lg",
    spec: "20/26 · 600",
    sample: "Create issue",
    usage: "Dialog titles and large stat values.",
  },
  {
    name: "heading-md",
    className: "text-heading-md",
    spec: "18/22 · 600",
    sample: "Stack trace",
    usage: "Drawer titles, trace and endpoint titles, and medium stat values.",
  },
  {
    name: "heading-sm",
    className: "text-heading-sm",
    spec: "16/20 · 600",
    sample: "Activity",
    usage: "Section titles.",
  },
  {
    name: "body-lg",
    className: "text-body-lg",
    spec: "16/24 · 400",
    sample: "Cannot read properties of undefined (reading 'organizationId')",
    usage: "Reading text: descriptions, empty states.",
  },
  {
    name: "body-md",
    className: "text-body-md",
    spec: "14/18 · 400–600",
    sample: "Cannot read properties of undefined",
    usage: "Default UI text: rows, nav, buttons, inputs, menus.",
  },
  {
    name: "body-sm",
    className: "text-body-sm",
    spec: "12/14 · 400–500",
    sample: "2m ago · 1.2k events",
    usage:
      "Secondary text: kbd hints, chart axes, filter counts, table and waterfall meta, stat notes.",
  },
];

export default function Typography() {
  return (
    <div className="flex flex-col divide-y divide-subtle bg-default font-sans text-default">
      {STYLES.map((style) => (
        <div className="flex items-baseline gap-6 py-4" key={style.name}>
          <div className="flex w-40 shrink-0 flex-col gap-0.5">
            <code className="text-body-md font-medium">{style.className}</code>
            <span className="text-body-md text-muted tabular-nums">{style.spec}</span>
          </div>
          <div className="flex min-w-0 flex-col gap-1">
            <div className="truncate">
              <span className={style.className}>{style.sample}</span>
            </div>
            <span className="text-body-md text-muted">{style.usage}</span>
          </div>
        </div>
      ))}
    </div>
  );
}