Replace native confirms with dialogs

2026-05-20 23:48:40 +02:00
parent e7eb43462c
commit ec2e0b01e9
4 changed files with 159 additions and 21 deletions
@@ -0,0 +1,86 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { AlertTriangle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+type ConfirmDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: ReactNode;
+  confirmLabel: string;
+  cancelLabel?: string;
+  pendingLabel?: string;
+  isPending?: boolean;
+  children?: ReactNode;
+  onConfirm: () => void | Promise<void>;
+};
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel = "Abbrechen",
+  pendingLabel = "Wird ausgeführt...",
+  isPending = false,
+  children,
+  onConfirm,
+}: ConfirmDialogProps) {
+  async function handleConfirm() {
+    await onConfirm();
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {children ? <DialogTrigger asChild>{children}</DialogTrigger> : null}
+      <DialogContent className="border-[var(--danger)]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
+            <AlertTriangle className="h-5 w-5" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="pt-1 text-sm leading-6">
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
+          Diese Aktion kann nicht rückgängig gemacht werden.
+        </div>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isPending}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={isPending}
+          >
+            {isPending ? pendingLabel : confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}