Tarjeta editorial.

<article class="ui-sample ui-content" data-editorial-card="true"><header><span>Crónica</span><h3><a href="#articulo">Santiago cambia a escala de barrio</a></h3></header><p>Qué calles, plazas y ciclovías cambiaron en los barrios del centro durante 2026 y qué datos usaron los municipios para decidirlo.</p><footer><a rel="author" href="#autor">Sebastián Illanes</a> · 4 min</footer></article>

<article class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-editorial-card="true"><header class="flex flex-wrap items-center justify-between gap-3"><span>Crónica</span><h3><a class="underline underline-offset-4" href="#articulo">Santiago cambia a escala de barrio</a></h3></header><p>Qué calles, plazas y ciclovías cambiaron en los barrios del centro durante 2026 y qué datos usaron los municipios para decidirlo.</p><footer class="flex flex-wrap items-center justify-between gap-3"><a class="underline underline-offset-4" rel="author" href="#autor">Sebastián Illanes</a> · 4 min</footer></article>

export interface EditorialCardProps {
  /** Género o sección del texto (crónica, ensayo, entrevista). */
  category?: string;
  /** Título del artículo. */
  title?: string;
  /** Enlace al artículo; vacío deja el título sin enlace. */
  href?: string;
  /** Resumen breve que ayuda a decidir si abrir el artículo. */
  description?: string;
  /** Autor o firma del texto. */
  author?: string;
  /** Enlace a la página del autor (`rel="author"`); vacío deja el nombre sin enlace. */
  authorHref?: string;
  /** Tiempo estimado de lectura (`4 min`). */
  readingTime?: string;
  className?: string;
}

/**
 * Tarjeta editorial con género, título enlazado, resumen, autor y tiempo de lectura; se usa en portadas y listados de artículos.
 *
 * @example <EditorialCard category="Ensayo" title="Una decisión explicada con evidencia" href="/articulos/decision" />
 * @example <EditorialCard category="Entrevista" title="Diez años de datos abiertos" author="Redacción" readingTime="7 min" />
 */
export function EditorialCard({
  category = "Crónica",
  title = "Santiago cambia a escala de barrio",
  href = "#articulo",
  description = "Qué calles, plazas y ciclovías cambiaron en los barrios del centro durante 2026 y qué datos usaron los municipios para decidirlo.",
  author = "Sebastián Illanes",
  authorHref = "#autor",
  readingTime = "4 min",
  className,
}: EditorialCardProps) {
  const firma = author ? (authorHref ? <a rel="author" href={authorHref}>{author}</a> : author) : null;
  return (
    <article className={["ui-content", className].filter(Boolean).join(" ")} data-editorial-card>
      {category || title ? (
        <header>
          {category ? <span>{category}</span> : null}
          {title ? <h3>{href ? <a href={href}>{title}</a> : title}</h3> : null}
        </header>
      ) : null}
      {description ? <p>{description}</p> : null}
      {firma || readingTime ? (
        <footer>
          {firma}
          {firma && readingTime ? " · " : null}
          {readingTime}
        </footer>
      ) : null}
    </article>
  );
}