feat: Upload du SEPA par les parents / Création d'un composant header

pour les titres de tableau

Front-End/src/components/SectionHeader.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Plus } from 'lucide-react';
+
+const SectionHeader = ({ 
+  icon: Icon, 
+  discountStyle = false,
+  title, 
+  description, 
+  button = false, 
+  buttonOpeningModal = false,
+  onClick = null 
+}) => {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <div className="flex items-center space-x-4">
+        <div className={`${discountStyle ? "bg-yellow-100" : "bg-emerald-100"} p-3 rounded-full shadow-md`}>
+          <Icon 
+          className={discountStyle ? 
+            "w-8 h-8 text-yellow-600" :
+            "w-8 h-8 text-emerald-600"
+          }
+          />
+        </div>
+        <div>
+          <h2 className="text-2xl font-bold text-gray-800">{title}</h2>
+          <p className="text-sm text-gray-500 italic">{description}</p>
+        </div>
+      </div>
+      {button && onClick && (
+        <button
+          onClick={onClick}
+          className={buttonOpeningModal ? 
+            "flex items-center bg-emerald-200 text-emerald-700 p-2 rounded-full shadow-sm hover:bg-emerald-300" :
+            "text-emerald-500 hover:bg-emerald-200 rounded-full p-2"
+          }
+        >
+          <Plus className="w-6 h-6" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default SectionHeader;