Message lorsqu'aucun enregistrement présent

2026-06-16 08:38:23 +02:00
parent 032a370e7d
commit 9058bc7d22
8 changed files with 156 additions and 6 deletions
@@ -0,0 +1,67 @@
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * État vide — affiché quand aucune plateforme n'est configurée.
+ * Props :
+ *   icon     — emoji ou caractère affiché en grand (défaut : '🏦')
+ *   title    — titre du message (défaut : 'Aucune plateforme configurée')
+ *   message  — texte explicatif (défaut : message générique plateformes)
+ *   cta      — libellé du bouton (défaut : 'Configurer mes plateformes')
+ *   to       — route cible du bouton (défaut : '/settings?section=plateformes')
+ */
+export default function EmptyState({
+  icon = '🏦',
+  title = 'Aucune plateforme configurée',
+  message = "Vous n'avez pas encore configuré de plateforme de crowdfunding sur votre compte. Associez au moins une plateforme pour commencer à suivre vos investissements.",
+  cta = 'Configurer mes plateformes',
+  to = '/settings?section=plateformes',
+}) {
+  const navigate = useNavigate();
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '72px 24px',
+      textAlign: 'center',
+      gap: 16,
+    }}>
+      <div style={{ fontSize: 56, lineHeight: 1 }}>{icon}</div>
+      <h2 style={{
+        margin: 0,
+        fontSize: '1.35rem',
+        fontWeight: 700,
+        color: 'var(--text)',
+      }}>
+        {title}
+      </h2>
+      <p style={{
+        margin: 0,
+        maxWidth: 480,
+        color: 'var(--text-muted)',
+        lineHeight: 1.6,
+        fontSize: '0.97rem',
+      }}>
+        {message}
+      </p>
+      <button
+        onClick={() => navigate(to)}
+        style={{
+          marginTop: 8,
+          padding: '10px 24px',
+          background: 'var(--primary)',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 8,
+          fontSize: '0.95rem',
+          fontWeight: 600,
+          cursor: 'pointer',
+        }}
+      >
+        {cta}
+      </button>
+    </div>
+  );
+}