separate components

2026-06-25 09:16:47 +02:00
parent cb89b521ef
commit 323667e835
25 changed files with 921 additions and 1572 deletions
@@ -0,0 +1,32 @@
+export default function ConfirmLogoutModal({ isOpen, onClose, onConfirm }) {
+    if (!isOpen) return null;
+  
+    return (
+      <div style={{
+        position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(4px)',
+        zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center'
+      }}>
+        <div style={{
+          backgroundColor: '#1A1A1A', border: '1px solid #ff003c',
+          boxShadow: '0 10px 30px rgba(255, 0, 60, 0.2)', borderRadius: '8px',
+          maxWidth: '400px', width: '100%', padding: '24px', color: '#FFF', fontFamily: 'monospace'
+        }}>
+          <h4 style={{ fontSize: '1.1rem', fontWeight: 'bold', letterSpacing: '1px', marginBottom: '10px', color: '#ff003c', textTransform: 'uppercase' }}>
+            DÉCONNEXION DU TERMINAL
+          </h4>
+          <p style={{ fontSize: '0.9rem', color: '#AAA', marginBottom: '24px', lineHeight: '1.5' }}>
+            Êtes-vous sûr de vouloir fermer la session sécurisée et quitter l'environnement cloud ?
+          </p>
+          <div style={{ display: 'flex', gap: '10px' }}>
+            <button onClick={onClose} style={{ flex: 1, padding: '10px', backgroundColor: '#333', color: '#FFF', border: 'none', borderRadius: '4px', fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px' }}>
+              ANNULER
+            </button>
+            <button onClick={onConfirm} style={{ flex: 1, padding: '10px', backgroundColor: '#ff003c', color: '#FFF', border: 'none', borderRadius: '4px', fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px' }}>
+              SE DÉCONNECTER
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+}
@@ -0,0 +1,18 @@
+export default function NotificationModal({ notification, onClose }) {
+    if (!notification) return null;
+    const isError = notification.type === 'error';
+    
+    return (
+        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
+            <div className={`bg-gray-900 border ${isError ? 'border-red-500/50 shadow-red-500/10' : 'border-cyan-500/50 shadow-cyan-500/10'} rounded-lg shadow-2xl max-w-sm w-full p-6 text-gray-200`}>
+                <h4 className={`text-lg font-mono font-bold tracking-wider mb-2 ${isError ? 'text-red-400' : 'text-cyan-400'}`}>
+                    {notification.title.toUpperCase()}
+                </h4>
+                <p className="text-sm text-gray-400 mb-6">{notification.message}</p>
+                <button onClick={onClose} className={`w-full font-mono py-2 rounded text-xs font-bold transition ${isError ? 'bg-red-600 hover:bg-red-500 text-white' : 'bg-cyan-500 hover:bg-cyan-400 text-gray-950'}`}>
+                    COMPRIS
+                </button>
+            </div>
+        </div>
+    );
+}