Create event modal

src/components/ToolBar/ToolBar.jsx

@@ -1,8 +1,8 @@
 import styles from "./ToolBar.module.css"
-import {Link} from "react-router";
 import Filter from "../Filter/Filter.jsx";
 import {useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
+import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
 
 
 function ToolBar({setFilters, filters, showCreate = true}) {
@@ -37,11 +37,7 @@ function ToolBar({setFilters, filters, showCreate = true}) {
             ) : null}
             <div className={styles.eventsButtons}>
                 {showCreate ? (
-                    <Link
+                    <CreateEventBtn />
-                        to="/event/create"
-                        className={`${styles.createButton} glassCard`}>
-                        +
-                    </Link>
                 ) : null}
 
                 <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>

src/components/ToolBar/ToolBar.module.css

@@ -38,11 +38,6 @@
     transition: all 0.5s ease;
 }
 
-.createButton {
-    font-size: 2rem;
-    color: black;
-}
-
 .createButton:hover, .searchButton:hover, .mobileFilter:hover {
     transform: translateY(-5px);
     cursor: pointer;

src/components/createEventBtn/CreateEventBtn.jsx

@@ -0,0 +1,20 @@
+import styles from "./createEventBtn.module.css"
+import { useState } from "react";
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+
+
+export default function CreateEventBtn() {
+
+    const [isOpen, setIsOpen] = useState(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)}>
+
+
+
+        </Modal>
+    </>
+}

src/components/createEventBtn/createEventBtn.module.css

@@ -0,0 +1,20 @@
+.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;
+}