Deshacer envío.

<aside class="ui-sample ui-feedback" data-undo-send="true" role="status"><p>Mensaje enviado a martin@example.cl.</p><button class="btn btn--secondary" type="button">Deshacer envío</button><progress value="7" max="10">7 segundos</progress></aside>

<aside class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-undo-send="true" role="status"><p>Mensaje enviado a martin@example.cl.</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">Deshacer envío</button><progress value="7" max="10">7 segundos</progress></aside>

import type { MouseEventHandler } from "react";

export interface UndoSendProps {
  /** Qué se envió y a quién. */
  message?: string;
  /** Texto del botón que anula el envío; vacío oculta el botón. */
  undoLabel?: string;
  onUndo?: MouseEventHandler<HTMLButtonElement>;
  /** Tiempo que queda para deshacer, en segundos (valor de `<progress>`). */
  value?: number;
  /** Duración total de la ventana para deshacer, en segundos (máximo de `<progress>`). */
  max?: number;
  /** Texto legible del tiempo restante, como respaldo de `<progress>`; por defecto «7 segundos» a partir de `value`. */
  valueText?: string;
  className?: string;
}

/**
 * Aviso de envío recién hecho con un botón para deshacerlo y el tiempo que queda; se muestra durante los segundos en que el envío todavía se puede anular.
 *
 * Usa `role="status"`. El componente no cuenta el tiempo: quien lo usa actualiza `value` (en segundos) y lo retira al llegar a cero.
 *
 * @example <UndoSend message="Mensaje enviado a martin@example.cl." value={7} onUndo={deshacer} />
 * @example <UndoSend message="Mensaje enviado a 2 destinatarios." value={3} max={10} />
 */
export function UndoSend({
  message = "Mensaje enviado a martin@example.cl.",
  undoLabel = "Deshacer envío",
  onUndo,
  value = 7,
  max = 10,
  valueText,
  className,
}: UndoSendProps) {
  return (
    <aside className={["ui-feedback", className].filter(Boolean).join(" ")} data-undo-send role="status">
      <p>{message}</p>
      {undoLabel ? <button className="btn btn--secondary" type="button" onClick={onUndo}>{undoLabel}</button> : null}
      <progress value={value} max={max}>{valueText ?? `${value} ${value === 1 ? "segundo" : "segundos"}`}</progress>
    </aside>
  );
}