Create settings modal

src/components/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,41 @@
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import styles from "./SettingsModal.module.css"
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+
+
+export default function SettingsModal() {
+
+    const [open, setOpen] = useState(false);
+
+    const { logout } = useContext(AuthContext);
+
+    const handleLogout = () => {
+        logout();
+    }
+
+    return (
+        <>
+            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
+                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
+            </Button>
+
+            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
+                <div className={styles.content}>
+
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+            </Modal>
+        </>
+    )
+}

src/components/SettingsModal/SettingsModal.module.css

@@ -0,0 +1,18 @@
+.content {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.modifyIcon {
+    height: 30px;
+    width: 30px;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 30px;
+}

src/components/ui/modal/modal.module.css

@@ -18,7 +18,7 @@
     max-width: 70%;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-    width: fit-content;
+    width: clamp(300px, 50vw, 600px);
     border: 1px solid rgba(200, 200, 200, 0.3);
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);