Serie documental.

<section class="ui-sample ui-document" data-archive-series="true"><header><strong>S3 · Contratos</strong><code>CTR</code></header><dl><div><dt>Serie</dt><dd>Contratos generales</dd></div><div><dt>Orden</dt><dd>Año y correlativo</dd></div><div><dt>Inventario</dt><dd><a href="#inventario">Abrir 18 documentos</a></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-archive-series="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>S3 · Contratos</strong><code>CTR</code></header><dl class="grid gap-2"><div><dt>Serie</dt><dd>Contratos generales</dd></div><div><dt>Orden</dt><dd>Año y correlativo</dd></div><div><dt>Inventario</dt><dd><a class="underline underline-offset-4" href="#inventario">Abrir 18 documentos</a></dd></div></dl></section>

export interface ArchiveSeriesItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
  /** Si existe, el valor es un enlace a esta dirección (por ejemplo, el inventario de la serie). */
  href?: string;
}

export interface ArchiveSeriesProps {
  /** Sección a la que pertenece la serie, con su sigla («S3 · Contratos»). */
  title?: string;
  /** Sigla de la serie, la que va en sus números documentales («CTR»); vacío la oculta. */
  code?: string;
  /** Datos de la serie: nombre, criterio de orden y enlace al inventario. */
  items?: ArchiveSeriesItem[];
  className?: string;
}

const ARCHIVE_SERIES_ITEMS: ArchiveSeriesItem[] = [
  { label: "Serie", value: "Contratos generales" },
  { label: "Orden", value: "Año y correlativo" },
  { label: "Inventario", value: "Abrir 18 documentos", href: "#inventario" },
];

/**
 * Ficha de una serie documental dentro de una sección del fondo, con su sigla, nombre, criterio de orden y enlace al inventario; se usa al navegar el archivo hasta los documentos.
 *
 * @example <ArchiveSeries code="PRE" items={[{ label: "Serie", value: "Prestación de servicios" }, { label: "Orden", value: "Año y correlativo" }, { label: "Inventario", value: "Abrir 18 documentos", href: "/archivo/cds/s3/pre" }]} />
 */
export function ArchiveSeries({
  title = "S3 · Contratos",
  code = "CTR",
  items = ARCHIVE_SERIES_ITEMS,
  className,
}: ArchiveSeriesProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-archive-series>
      {title || code ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {code ? <code>{code}</code> : null}
        </header>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.href ? <a href={item.href}>{item.value}</a> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}