feat: Messagerie WIP [#17]

Front-End/src/components/AlertMessage.js

@@ -1,21 +1,36 @@
 import React from 'react';
 
-const AlertMessage = ({ title, message, buttonText, buttonLink }) => {
+const AlertMessage = ({
+  type = 'info',
+  title,
+  message,
+  actionLabel,
+  onAction,
+}) => {
+  // Définir les styles en fonction du type d'alerte
+  const typeStyles = {
+    info: 'bg-blue-100 border-blue-500 text-blue-700',
+    warning: 'bg-yellow-100 border-yellow-500 text-yellow-700',
+    error: 'bg-red-100 border-red-500 text-red-700',
+    success: 'bg-green-100 border-green-500 text-green-700',
+  };
+
+  const alertStyle = typeStyles[type] || typeStyles.info;
+
   return (
-    <div
-      className="alert centered bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4"
-      role="alert"
-    >
+    <div className={`alert centered border-l-4 p-4 ${alertStyle}`} role="alert">
       <h3 className="font-bold">{title}</h3>
       <p className="mt-2">{message}</p>
-      <div className="alert-actions mt-4">
-        <a
-          className="btn primary bg-emerald-500 text-white rounded-md px-4 py-2 hover:bg-emerald-600"
-          href={buttonLink}
-        >
-          {buttonText} <i className="icon profile-add"></i>
-        </a>
-      </div>
+      {actionLabel && onAction && (
+        <div className="alert-actions mt-4">
+          <button
+            className="btn primary bg-emerald-500 text-white rounded-md px-4 py-2 hover:bg-emerald-600"
+            onClick={onAction}
+          >
+            {actionLabel}
+          </button>
+        </div>
+      )}
     </div>
   );
 };