Create settings modal

2025-12-09 09:40:20 +01:00
parent 6f7e5b9258
commit 6d8899c7de
6 changed files with 72 additions and 26 deletions
@@ -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>
+        </>
+    )
+}