71 lines
1.6 KiB
TypeScript
71 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type Props = {
|
|
open: boolean;
|
|
title: string;
|
|
description: string;
|
|
confirmLabel?: string;
|
|
pending?: boolean;
|
|
pendingLabel?: string;
|
|
confirmDisabled?: boolean;
|
|
children?: ReactNode;
|
|
onOpenChange: (open: boolean) => void;
|
|
onConfirm: () => void;
|
|
};
|
|
|
|
export default function ConfirmDialog({
|
|
open,
|
|
title,
|
|
description,
|
|
confirmLabel = "Löschen",
|
|
pending = false,
|
|
pendingLabel = "Wird gelöscht...",
|
|
confirmDisabled = false,
|
|
children,
|
|
onOpenChange,
|
|
onConfirm,
|
|
}: Props) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription>{description}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{children && <div className="rounded-lg border bg-slate-50 p-3">{children}</div>}
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => onOpenChange(false)}
|
|
disabled={pending}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
onClick={onConfirm}
|
|
disabled={pending || confirmDisabled}
|
|
>
|
|
{pending ? pendingLabel : confirmLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|