Create FilterBtn

src/components/ToolBar/ToolBar.jsx

@@ -1,17 +1,12 @@
 import styles from "./ToolBar.module.css"
-import Filter from "../Filter/Filter.jsx";
-import {useContext, useState} from "react";
+import { useContext } from "react";
 import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
-import Button from "../ui/button/button.tsx";
-import {AuthContext} from "../../contexts/auth/AuthContext.js";
-import SearchBtn from "./components/searchBtn/SearchBtn.tsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import SearchBtn from "./tools/SearchBtn.tsx";
+import FilterBtn from "./tools/FilterBtn.tsx";
 
 function ToolBar({setFilters, filters, showCreate = true}) {
     const { user } = useContext(AuthContext);
-    const [isFilterVisible, setIsFilterVisible] = useState(false);
-    const toggleFilters = () => {
-        setIsFilterVisible(prev => !prev);
-    };
 
     return (
         <div>
@@ -21,15 +16,7 @@ function ToolBar({setFilters, filters, showCreate = true}) {
                 ) : null}
 
                 <SearchBtn />
-
-                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
-                        <img src="filter.svg" alt="Filtrer"/>
-                    </Button>
-                    <div className={styles.filterMenu}>
-                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
-                    </div>
-                </div>
+                <FilterBtn setFilters={setFilters} filters={filters} />
             </div>
         </div>
     );