Call create function + update style

src/components/createEventBtn/CreateEventBtn.jsx

@@ -2,19 +2,41 @@ import styles from "./createEventBtn.module.css"
 import { useState } from "react";
 import Modal from "../ui/modal/modal.jsx";
 import Button from "../ui/button/button.jsx";
+import TextInput from "../ui/input/input.jsx";
+import createEvent from "../../utils/event/createEvent.js"
 
 
 export default function CreateEventBtn() {
 
     const [isOpen, setIsOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+
+    const handleCreateEvent = async () => {
+
+        if(name !== "" || description !== "") await createEvent(name, description);
+        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 placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                </div>
 
+                <div className={styles.inputContainer}>
+                    <h2>Description</h2>
+                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
 
+                <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
+
+            </section>
         </Modal>
     </>
 }

src/components/createEventBtn/createEventBtn.module.css

@@ -18,3 +18,24 @@
     transform: translateY(-5px);
     cursor: pointer;
 }
+
+.inputContainer {
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+
+    margin: 1em;
+}
+
+.create {
+    align-self: center;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}