add of contact modal

src/components/Footer/Footer.jsx

@@ -1,13 +1,17 @@
 import styles from "./Footer.module.css"
 import {Link} from "react-router";
+import {useState} from "react";
+import Modal from "../ui/modal/modal.jsx";
+import TextInput from "../ui/input/input.jsx";
 
-function Footer(){
+export default function Footer(){
     const currentYear = new Date().getFullYear();
     const scrollToTop = () => {
         window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
     };
+    const [isContactModal, setIsContactModal] = useState(false);
 
-    return (
+    return <>
         <footer className={`${styles.footer} glassCard`}>
             <div className={styles.footerContent}>
                 <div className={styles.copyright}>
@@ -19,13 +23,36 @@ function Footer(){
                     <span className={styles.separator}></span>
                     <Link to="/legalNotices" className={styles.link}>Mentions légales</Link>
                     <span className={styles.separator}></span>
-                    <Link to="/contact" className={styles.link}>Contact</Link>
+                    <Link
+                        className={styles.link}
+                        onClick={() => setIsContactModal(true)}
+                    >
+                        Contact
+                    </Link>
                     <span className={styles.separator}></span>
-                    <Link to="/" className={styles.link} onClick={scrollToTop}>Accueil</Link>
+                    <Link to="/"
+                          className={styles.link}
+                          onClick={scrollToTop}
+                    >
+                        Accueil
+                    </Link>
                 </nav>
             </div>
         </footer>
-    );
-}
 
-export default Footer;
+        {/* TODO : mettre l'adresse email et le numéro de tel dans un fichier de configuration */}
+        <Modal title={"Fiche de contact"} open={isContactModal} onClose={() => setIsContactModal(false)}>
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <h3>Adresse email</h3>
+                    <p>example@gmail.com</p>
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h3>Numéro de téléphone</h3>
+                    <p>+33 6 09 78 27 19</p>
+                </div>
+            </section>
+        </Modal>
+    </>
+}

src/components/Footer/Footer.module.css

@@ -43,6 +43,14 @@
     white-space: nowrap;
 }
 
+.section{
+    margin-top: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+
 
 
 @media screen and (max-width: 768px) {
@@ -60,4 +68,8 @@
     .link {
         margin: 0.5rem 1rem;
     }
+
+    .separator {
+        display: none;
+    }
 }