71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
interface ConfirmModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
title: string;
|
||
|
|
message: string;
|
||
|
|
confirmText?: string;
|
||
|
|
cancelText?: string;
|
||
|
|
confirmColor?: 'primary' | 'danger' | 'warning';
|
||
|
|
onConfirm: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ConfirmModal({
|
||
|
|
isOpen,
|
||
|
|
title,
|
||
|
|
message,
|
||
|
|
confirmText = 'Confirmer',
|
||
|
|
cancelText = 'Annuler',
|
||
|
|
confirmColor = 'primary',
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
}: ConfirmModalProps) {
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
const getConfirmButtonStyle = () => {
|
||
|
|
switch (confirmColor) {
|
||
|
|
case 'danger':
|
||
|
|
return 'bg-red-600 hover:bg-red-700 text-white';
|
||
|
|
case 'warning':
|
||
|
|
return 'bg-orange-600 hover:bg-orange-700 text-white';
|
||
|
|
default:
|
||
|
|
return 'bg-lblue hover:bg-dblue text-white';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
|
||
|
|
<div className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="border-b border-gray-200 px-6 py-5 bg-white">
|
||
|
|
<h2 className="text-xl font-semibold text-gray-900">{title}</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="px-6 py-5">
|
||
|
|
<p className="text-sm text-gray-600">{message}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50 flex justify-end gap-3">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onCancel}
|
||
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
|
||
|
|
>
|
||
|
|
{cancelText}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={onConfirm}
|
||
|
|
className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${getConfirmButtonStyle()}`}
|
||
|
|
>
|
||
|
|
{confirmText}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|