Rework of campaign structure; locking

src/components/ConfirmDialog.tsx

@@ -0,0 +1,44 @@
+import Button from "./Button";
+
+export type ConfirmDialogTone = "default" | "danger";
+
+export type ConfirmDialogProps = {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: ConfirmDialogTone;
+  busy?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+};
+
+export default function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  tone = "default",
+  busy = false,
+  onConfirm,
+  onCancel
+}: ConfirmDialogProps) {
+  if (!open) return null;
+
+  return (
+    <div className="confirm-backdrop" role="presentation" onMouseDown={(event) => {
+      if (event.target === event.currentTarget && !busy) onCancel();
+    }}>
+      <section className="confirm-dialog" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title" aria-describedby="confirm-dialog-message">
+        <h2 id="confirm-dialog-title">{title}</h2>
+        <p id="confirm-dialog-message">{message}</p>
+        <div className="button-row compact-actions confirm-dialog-actions">
+          <Button onClick={onCancel} disabled={busy}>{cancelLabel}</Button>
+          <Button variant={tone === "danger" ? "danger" : "primary"} onClick={onConfirm} disabled={busy}>{busy ? "Working…" : confirmLabel}</Button>
+        </div>
+      </section>
+    </div>
+  );
+}