wip

src/components/confirm-dialog.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react'
+
+type Props = {
+  open: boolean
+  title: string
+  message: string
+  confirmLabel?: string
+  cancelLabel?: string
+  danger?: boolean
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmDialog({
+  open,
+  title,
+  message,
+  confirmLabel = 'Bestätigen',
+  cancelLabel = 'Abbrechen',
+  danger,
+  onConfirm,
+  onCancel,
+}: Props) {
+  const confirmRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    confirmRef.current?.focus()
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') onCancel()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open, onCancel])
+
+  if (!open) return null
+
+  return (
+    <div className="confirm-dialog-backdrop" onClick={onCancel}>
+      <div
+        className="confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-dialog-title"
+        aria-describedby="confirm-dialog-message"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <h2 id="confirm-dialog-title" className="confirm-dialog-title">
+          {title}
+        </h2>
+        <p id="confirm-dialog-message" className="confirm-dialog-message">
+          {message}
+        </p>
+        <div className="confirm-dialog-actions">
+          <button type="button" className="btn btn-secondary" onClick={onCancel}>
+            {cancelLabel}
+          </button>
+          <button
+            ref={confirmRef}
+            type="button"
+            className={danger ? 'btn btn-danger' : 'btn btn-primary'}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}