Estado de error.

<section class="ui-sample ui-feedback ui-state ui-state--error" data-error-state role="alert"><svg class="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3>No pudimos cargar los datos</h3><p>Conservamos la última versión disponible.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Reintentar</button><a class="btn btn--quiet" href="#estado">Ver estado del servicio</a></div></div></section>

<section class="ui-sample ui-feedback ui-state ui-state--error border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-error-state role="alert"><svg class="ui-state__icon h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3>No pudimos cargar los datos</h3><p>Conservamos la última versión disponible.</p><div class="ui-actions"><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Reintentar</button><a class="btn btn--quiet underline underline-offset-4" href="#estado">Ver estado del servicio</a></div></div></section>

import type { MouseEventHandler } from "react";

export interface ErrorStateProps {
  /** Qué no se pudo hacer («No pudimos cargar los datos»). */
  title?: string;
  /** Qué se conserva o qué respondió el origen, con hora si la hay. */
  description?: string;
  /** Texto del botón que reintenta; vacío lo oculta. */
  retryLabel?: string;
  /** Se llama al pulsar el botón de reintentar. */
  onRetry?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del enlace a la página de estado; vacío lo oculta. */
  statusLabel?: string;
  /** Destino del enlace a la página de estado del servicio. */
  statusHref?: string;
  className?: string;
}

/**
 * Estado de error de una vista cuyos datos no cargaron, con el motivo, un botón para reintentar y un enlace al estado del servicio.
 *
 * Usa `role="alert"`. Si ambas acciones van vacías, no se muestra la fila de acciones.
 *
 * @example <ErrorState onRetry={recargar} statusHref="/estado" />
 * @example <ErrorState description="El origen respondió 503 a las 18:24 CLT." onRetry={recargar} />
 */
export function ErrorState({
  title = "No pudimos cargar los datos",
  description = "Conservamos la última versión disponible.",
  retryLabel = "Reintentar",
  onRetry,
  statusLabel = "Ver estado del servicio",
  statusHref = "#estado",
  className,
}: ErrorStateProps) {
  return (
    <section className={["ui-feedback ui-state ui-state--error", className].filter(Boolean).join(" ")} data-error-state role="alert">
      <svg className="ui-state__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg>
      <div>
        {title ? <h3>{title}</h3> : null}
        {description ? <p>{description}</p> : null}
        {retryLabel || statusLabel ? (
          <div className="ui-actions">
            {retryLabel ? <button className="btn btn--secondary" type="button" onClick={onRetry}>{retryLabel}</button> : null}
            {statusLabel ? <a className="btn btn--quiet" href={statusHref}>{statusLabel}</a> : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}