Giovanni/SAE-BUT2
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 committed 2026-01-12 10:15:04 +01:00
1 parent af6d0a5649
commit 5d76670a40
2 files changed
+18 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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>
)