From ffe28cc4e36275506ca775925e46645b58eff37c Mon Sep 17 00:00:00 2001
From: Gilles Soulier <gil.soulier@gmail.com>
Date: Sun, 24 May 2026 15:40:57 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20composant=20Modal=20r=C3=A9utilisab?=
 =?UTF-8?q?le=20(overlay=20+=20Escape)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Modal.tsx | 72 +++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 frontend/src/components/Modal.tsx

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
new file mode 100644
index 0000000..6a54cef
--- /dev/null
+++ b/frontend/src/components/Modal.tsx
@@ -0,0 +1,72 @@
+import { useEffect } from 'react'
+
+interface ModalProps {
+  title: string
+  onClose: () => void
+  children: React.ReactNode
+  width?: number
+}
+
+export default function Modal({ title, onClose, children, width = 480 }: ModalProps) {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        background: 'rgba(0,0,0,0.6)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 200,
+        padding: 16,
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="glass"
+        style={{
+          width: '100%',
+          maxWidth: width,
+          borderRadius: 12,
+          padding: 20,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16,
+          maxHeight: '90dvh',
+          overflowY: 'auto',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <h2 style={{ margin: 0, color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 16 }}>
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              color: 'var(--ink-3)',
+              fontSize: 20,
+              cursor: 'pointer',
+              lineHeight: 1,
+              padding: 4,
+            }}
+            aria-label="Fermer"
+          >
+            ✕
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}