Archivador y tomo.

<section class="ui-sample ui-document" data-binder="true"><header><strong>Archivador CDS-A1</strong><span>Tomo 1</span></header><dl><div><dt>Fondo</dt><dd>CDS</dd></div><div><dt>Folios</dt><dd>1–188</dd></div><div><dt>Ubicación</dt><dd>Estante A · posición 1</dd></div></dl></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-binder="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Archivador CDS-A1</strong><span>Tomo 1</span></header><dl class="grid gap-2"><div><dt>Fondo</dt><dd>CDS</dd></div><div><dt>Folios</dt><dd>1–188</dd></div><div><dt>Ubicación</dt><dd>Estante A · posición 1</dd></div></dl></section>

export interface BinderItem {
  /** Nombre del dato (`<dt>`): fondo, folios, ubicación. */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para códigos que se copian tal cual. */
  monospace?: boolean;
}

export interface BinderProps {
  /** Nombre del archivador con su código («Archivador CDS-A1»). */
  title?: string;
  /** Tomo del archivador («Tomo 1»); vacío lo oculta. */
  status?: string;
  /** Datos del tomo: fondo al que pertenece, rango de folios y ubicación física. */
  items?: BinderItem[];
  className?: string;
}

const ITEMS: BinderItem[] = [
  { label: "Fondo", value: "CDS" },
  { label: "Folios", value: "1–188" },
  { label: "Ubicación", value: "Estante A · posición 1" },
];

/**
 * Ficha de un archivador físico y su tomo, con el fondo, el rango de folios y la ubicación en el estante; se usa para encontrar dónde está guardado un documento en papel.
 *
 * @example <Binder title="Archivador CIS-A1" items={[{ label: "Fondo", value: "CIS" }, { label: "Folios", value: "1–214" }, { label: "Ubicación", value: "Estante A · posición 2" }]} />
 */
export function Binder({
  title = "Archivador CDS-A1",
  status = "Tomo 1",
  items = ITEMS,
  className,
}: BinderProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-binder>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span>{status}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}