Contenido relacionado.

<nav class="ui-sample ui-content" aria-label="Contenido relacionado"><h3>También puedes leer</h3><ul><li><a href="#metodo">Cómo se construyó la serie regional</a></li><li><a href="#mapa">Mapa de cambios por comuna</a></li></ul></nav>

<nav class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" aria-label="Contenido relacionado"><h3>También puedes leer</h3><ul class="grid gap-2"><li><a class="underline underline-offset-4" href="#metodo">Cómo se construyó la serie regional</a></li><li><a class="underline underline-offset-4" href="#mapa">Mapa de cambios por comuna</a></li></ul></nav>

export interface RelatedContentItem {
  /** Título del contenido enlazado. */
  label: string;
  href: string;
}

export interface RelatedContentProps {
  /** Título visible sobre la lista. */
  title?: string;
  /** Nombre accesible del `<nav>`. */
  label?: string;
  /** Contenidos enlazados, del más cercano al tema al más general. */
  items?: RelatedContentItem[];
  className?: string;
}

const RELATED_CONTENT_ITEMS: RelatedContentItem[] = [
  { label: "Cómo se construyó la serie regional", href: "#metodo" },
  { label: "Mapa de cambios por comuna", href: "#mapa" },
];

/**
 * Lista de enlaces a contenido relacionado al final de un artículo, para seguir leyendo sobre el mismo tema.
 *
 * Es un `<nav>` con nombre accesible propio, distinto del de la navegación principal.
 *
 * @example <RelatedContent items={[{ label: "Cómo se construyó la serie regional", href: "/metodo" }, { label: "Archivo 2025", href: "/archivo/2025" }]} />
 */
export function RelatedContent({
  title = "También puedes leer",
  label = "Contenido relacionado",
  items = RELATED_CONTENT_ITEMS,
  className,
}: RelatedContentProps) {
  if (!items.length) return null;
  return (
    <nav className={["ui-content", className].filter(Boolean).join(" ")} aria-label={label}>
      {title ? <h3>{title}</h3> : null}
      <ul>
        {items.map((item, i) => (
          <li key={`${item.href}-${i}`}>
            <a href={item.href}>{item.label}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}