68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface ConfirmDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: React.ReactNode;
|
|
disabled?: boolean;
|
|
desc: React.JSX.Element | string;
|
|
cancelBtnText?: string;
|
|
confirmText?: React.ReactNode;
|
|
destructive?: boolean;
|
|
handleConfirm: () => void;
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export function ConfirmDialog(props: ConfirmDialogProps) {
|
|
const {
|
|
title,
|
|
desc,
|
|
children,
|
|
className,
|
|
confirmText,
|
|
cancelBtnText,
|
|
destructive,
|
|
isLoading,
|
|
disabled = false,
|
|
handleConfirm,
|
|
...actions
|
|
} = props;
|
|
return (
|
|
<AlertDialog {...actions}>
|
|
<AlertDialogContent className={cn(className && className)}>
|
|
<AlertDialogHeader className="text-left">
|
|
<AlertDialogTitle>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription asChild>
|
|
<div>{desc}</div>
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
{children}
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel disabled={isLoading}>
|
|
{cancelBtnText ?? "Cancel"}
|
|
</AlertDialogCancel>
|
|
<Button
|
|
variant={destructive ? "destructive" : "default"}
|
|
onClick={handleConfirm}
|
|
disabled={disabled || isLoading}
|
|
>
|
|
{confirmText ?? "Continue"}
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
}
|