Sin conexión.

<section class="ui-sample ui-feedback" data-offline-state="true" role="status"><h3>Sin conexión</h3><p>Puedes seguir leyendo el contenido descargado.</p><button class="btn btn--secondary" type="button">Reintentar ahora</button></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-offline-state="true" role="status"><h3>Sin conexión</h3><p>Puedes seguir leyendo el contenido descargado.</p><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 ahora</button></section>

import type { MouseEventHandler } from "react";

export interface OfflineStateProps {
  title?: string;
  /** Qué sigue disponible o qué queda pendiente de sincronizar. */
  description?: string;
  /** Texto del botón que reintenta la conexión; vacío lo oculta. */
  retryLabel?: string;
  /** Se llama al pulsar el botón de reintentar. */
  onRetry?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Aviso de que no hay conexión, con lo que sigue disponible o pendiente y un botón para reintentar.
 *
 * Usa `role="status"`: se anuncia sin interrumpir la lectura.
 *
 * @example <OfflineState onRetry={reconectar} />
 * @example <OfflineState description="3 cambios esperan sincronización." onRetry={reconectar} />
 */
export function OfflineState({
  title = "Sin conexión",
  description = "Puedes seguir leyendo el contenido descargado.",
  retryLabel = "Reintentar ahora",
  onRetry,
  className,
}: OfflineStateProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-offline-state role="status">
      {title ? <h3>{title}</h3> : null}
      {description ? <p>{description}</p> : null}
      {retryLabel ? <button className="btn btn--secondary" type="button" onClick={onRetry}>{retryLabel}</button> : null}
    </section>
  );
}