Spaces:
Running
Running
File size: 2,008 Bytes
2eb87e3 d22337b 2eb87e3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import { useEffect, useRef } from "react";
import { Button } from "./Button";
export function ConfirmDialog({
open,
title,
body,
confirmLabel = "Confirm",
danger = false,
busy = false,
onConfirm,
onCancel,
}: {
open: boolean;
title: string;
body: string;
confirmLabel?: string;
danger?: boolean;
busy?: boolean;
onConfirm: () => void;
onCancel: () => void;
}) {
const cancelRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (!open) return;
cancelRef.current?.focus();
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onCancel();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open, onCancel]);
if (!open) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
role="dialog"
aria-modal="true"
aria-labelledby="confirm-title"
onMouseDown={(e) => {
if (e.target === e.currentTarget) onCancel();
}}
>
<div className="w-full max-w-md rounded-md border border-line bg-surface-raised p-5 shadow-lg">
<h2 id="confirm-title" className="text-base font-semibold text-ink">
{title}
</h2>
<p className="mt-2 text-sm leading-relaxed text-ink-secondary">{body}</p>
<div className="mt-5 flex justify-end gap-2">
<button
ref={cancelRef}
type="button"
onClick={onCancel}
disabled={busy}
className="inline-flex h-9 items-center justify-center rounded-md border border-line bg-surface-raised px-3.5 text-sm font-medium text-ink hover:bg-surface-sunken focus-ring disabled:opacity-50"
>
Cancel
</button>
<Button variant={danger ? "danger" : "primary"} onClick={onConfirm} disabled={busy}>
{busy ? "Working…" : confirmLabel}
</Button>
</div>
</div>
</div>
);
}
|