75 lines
No EOL
2.3 KiB
TypeScript
75 lines
No EOL
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { AlertTriangle, Check, X } from "lucide-react";
|
|
import { Button } from "./button";
|
|
|
|
interface ConfirmationModalProps {
|
|
isOpen: boolean;
|
|
title: string;
|
|
description: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
confirmButtonVariant?: "default" | "destructive" | "gradient";
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function ConfirmationModal({
|
|
isOpen,
|
|
title,
|
|
description,
|
|
confirmText = "Confirmer",
|
|
cancelText = "Annuler",
|
|
onConfirm,
|
|
onCancel,
|
|
confirmButtonVariant = "default",
|
|
isLoading = false
|
|
}: ConfirmationModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
|
<div className="bg-white rounded-2xl max-w-md w-full mx-4 shadow-2xl border">
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<AlertTriangle className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-slate-900">{title}</h2>
|
|
</div>
|
|
|
|
<div className="text-slate-600 mb-6">
|
|
<p>{description}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<Button
|
|
variant="outline"
|
|
onClick={onCancel}
|
|
className="flex-1"
|
|
disabled={isLoading}
|
|
>
|
|
<X className="w-4 h-4 mr-2" />
|
|
{cancelText}
|
|
</Button>
|
|
<Button
|
|
onClick={onConfirm}
|
|
className={`flex-1 ${
|
|
confirmButtonVariant === "gradient"
|
|
? "bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-black hover:from-indigo-300 hover:via-purple-300 hover:to-pink-300"
|
|
: confirmButtonVariant === "destructive"
|
|
? "bg-red-500 hover:bg-red-600 text-white"
|
|
: ""
|
|
}`}
|
|
disabled={isLoading}
|
|
>
|
|
<Check className="w-4 h-4 mr-2" />
|
|
{isLoading ? "En cours..." : confirmText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |