Added Chat Page

components/ConfirmModal.tsx

@@ -0,0 +1,70 @@
+'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>
+  );
+}