Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use UI button component on filter and toolbar

Browse Source
This commit is contained in:
Giovanni
2026-01-12 10:15:04 +01:00
parent af6d0a5649
commit 5d76670a40
2 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Filter/Filter.jsx
+13 -8
View File
@@ -1,4 +1,5 @@
import styles from "./Filter.module.css";
import Button from "../ui/button/button.jsx"
function Filter({isFilterVisible, filters, setFilters}){
const setAlphabeticalOrder = (order) => {
@@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){
return (
<div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
<abbr title="Tri alphabétique croissant (A à Z)">
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setAlphabeticalOrder("asc")}>
<img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
</button>
</Button>
</abbr>
<abbr title="Tri alphabétique décroissant (Z à A)">
<button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setAlphabeticalOrder("desc")}>
<img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
</button>
</Button>
</abbr>
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setYearOrder("desc")}>
<img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
</button>
</Button>
</abbr>
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
<Button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
variant={"default"}
onClick={() => setYearOrder("asc")}>
<img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
</button>
</Button>
</abbr>
</div>
)
src/components/ToolBar/ToolBar.jsx
+5 -4
View File
@@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx";
import {useEffect, useState} from "react";
import SearchBar from "../SearchBar/SearchBar.jsx";
import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
import Button from "../ui/button/button.jsx";
function ToolBar({setFilters, filters, showCreate = true}) {
@@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) {
<CreateEventBtn />
) : null}
<button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
<Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
<img src="search.svg" alt="Rechercher"/>
</button>
</Button>
<div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
<button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
<Button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} variant={"default"} onClick={toggleFilters}>
<img src="filter.svg" alt="Filtrer"/>
</button>
</Button>
<div className={styles.filterMenu}>
<Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
</div>