Create FilterBtn

src/components/ToolBar/tools/FilterBtn.tsx

@@ -0,0 +1,29 @@
+import styles from "../ToolBar.module.css"
+import Button from "../../ui/button/button";
+import { useEffect, useState } from "react";
+import SearchBar from "../../SearchBar/SearchBar";
+import Filter from "../../Filter/Filter.jsx";
+
+
+interface FilterBtnProps {
+    setFilters: (filter: string) => void;
+    filters: string;
+}
+
+export default function FilterBtn({ setFilters, filters }: FilterBtnProps) {
+
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+
+    const toggleFilters = () => {
+        setIsFilterVisible(prev => !prev);
+    };
+
+    return <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>
+}