Move createEventBtn

src/components/ToolBar/ToolBar.jsx

@@ -1,6 +1,6 @@
 import styles from "./ToolBar.module.css"
 import { useContext } from "react";
-import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
+import CreateEventBtn from "./tools/createEventBtn/CreateEventBtn.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import SearchBtn from "./tools/SearchBtn.tsx";
 import FilterBtn from "./tools/FilterBtn.tsx";
@@ -14,7 +14,6 @@ function ToolBar({setFilters, filters, showCreate = true}) {
                 {showCreate && user.isAdmin ? (
                     <CreateEventBtn />
                 ) : null}
-
                 <SearchBtn />
                 <FilterBtn setFilters={setFilters} filters={filters} />
             </div>

src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx

@@ -0,0 +1,61 @@
+import styles from "./createEventBtn.module.css"
+import { useState, useContext } from "react";
+import Modal from "../../../ui/modal/modal.tsx";
+import Button from "../../../ui/button/button.tsx";
+import TextInput from "../../../ui/input/input.tsx";
+import { EventContext } from "../../../../contexts/events/EventContext.js";
+
+
+export default function CreateEventBtn() {
+
+    const { addEvent } = useContext(EventContext);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+
+    const handleCreateEvent = async () => {
+
+        if (name !== "" && description !== "" && start !== "" && end !== "") {
+            await addEvent(name, description, start, end);
+        }
+        setIsOpen(false);
+    }
+
+    return <>
+        <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
+
+        <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>
+
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <h2>Titre</h2>
+                    <TextInput className={styles.input} placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Description</h2>
+                    <TextInput className={styles.input} placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Date</h2>
+                    <div className={styles.dateInputContainer}>
+                        <div className={styles.dateInput}>
+                            <p>Début</p>
+                            <TextInput type={"datetime-local"} value={start} onChange={e => setStart(e.target.value)} />
+                        </div>
+                        <div className={styles.dateInput}>
+                            <p>Fin</p>
+                            <TextInput type={"datetime-local"} value={end} onChange={e => setEnd(e.target.value)} />
+                        </div>
+                    </div>
+                </div>
+
+                <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
+            </section>
+        </Modal>
+    </>
+}

src/components/ToolBar/tools/createEventBtn/createEventBtn.module.css

@@ -0,0 +1,67 @@
+.createButton {
+    font-size: 1.5rem;
+    color: black;
+}
+
+.createButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    width: 55px !important;
+    height: 55px !important;
+    transition: all 0.5s ease;
+}
+
+.createButton:hover {
+    transform: translateY(-5px);
+    cursor: pointer;
+}
+
+.inputContainer {
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+
+    margin: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.input {
+    width: 70%;
+}
+
+.create {
+    align-self: center;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.dateInputContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+.dateInput {
+ margin: 1em;
+}
+
+
+@media screen and (max-width: 760px) {
+
+    .dateInputContainer {
+        flex-direction: column;
+    }
+}