Autoría.

<p class="ui-sample" data-byline>Por <a rel="author" href="#sebastian">Sebastián Illanes</a> · <time datetime="2026-08-25">25 ago 2026</time></p>

<p class="ui-sample border border-slate-300 bg-white p-4 text-slate-950" data-byline>Por <a class="underline underline-offset-4" rel="author" href="#sebastian">Sebastián Illanes</a> · <time datetime="2026-08-25">25 ago 2026</time></p>

import type { ReactNode } from "react";

export interface BylineAuthor {
  /** Nombre visible; vacío omite al autor. */
  name: string;
  /** Página de la persona o del equipo; sin enlace, el nombre va como texto. */
  href?: string;
}

const AUTHORS: BylineAuthor[] = [{ name: "Sebastián Illanes", href: "#sebastian" }];

export interface BylineProps {
  /** Palabra que antecede a los autores; vacía se omite. */
  prefix?: string;
  /** Autores en orden de firma; se unen con comas y «y». */
  authors?: BylineAuthor[];
  /** Fecha de publicación en ISO 8601 (atributo `dateTime`). */
  dateTime?: string;
  /** Texto visible de la fecha dentro de `<time>`; vacío la oculta. */
  time?: string;
  className?: string;
}

function firmas(authors: BylineAuthor[]): ReactNode[] {
  return authors.flatMap((author, i) => [
    i === 0 ? null : i === authors.length - 1 ? " y " : ", ",
    author.href ? <a rel="author" href={author.href} key={i}>{author.name}</a> : author.name,
  ]);
}

/**
 * Línea de autoría con los autores y la fecha de publicación; va bajo el título de un artículo o en una tarjeta editorial.
 *
 * Un autor con `href` se enlaza con `rel="author"`; sin autores ni fecha no se emite nada.
 *
 * @example <Byline authors={[{ name: "Sebastián Illanes", href: "/autores/sebastian" }, { name: "Equipo COCHID", href: "/equipo" }]} dateTime="2026-08-25" time="25 ago 2026" />
 * @example <Byline authors={[{ name: "Redacción" }]} time="" />
 */
export function Byline({
  prefix = "Por",
  authors = AUTHORS,
  dateTime = "2026-08-25",
  time = "25 ago 2026",
  className,
}: BylineProps) {
  const firmantes = authors.filter((author) => author.name);
  if (!firmantes.length && !time) return null;
  return (
    <p className={className} data-byline>
      {firmantes.length ? <>{prefix ? `${prefix} ` : null}{firmas(firmantes)}</> : null}
      {firmantes.length && time ? " · " : null}
      {time ? <time dateTime={dateTime || undefined}>{time}</time> : null}
    </p>
  );
}