49 lines
2.2 KiB
JavaScript
49 lines
2.2 KiB
JavaScript
// Rôle : affiche et filtre la liste des affixes Diablo IV.
|
|
import { useMemo } from "react";
|
|
import { CopyChecklistItemsButton } from "../CopyChecklistItemsButton.jsx";
|
|
import { GameBreadcrumb } from "../GameBreadcrumb.jsx";
|
|
import { Diablo4AffixCard } from "./Diablo4AffixCard.jsx";
|
|
import { Diablo4Filters } from "./Diablo4Filters.jsx";
|
|
import { getCategoryLabel, getFilteredDiablo4Affixes } from "./utils.js";
|
|
|
|
export function Diablo4Listing({ game, diablo4, filters, setFilters }) {
|
|
const activeFilters = filters.diablo4;
|
|
const options = [...(diablo4.filterOptions.affixes || [])].sort((a, b) => getCategoryLabel(a).localeCompare(getCategoryLabel(b), "fr"));
|
|
const visible = useMemo(
|
|
() => getFilteredDiablo4Affixes({ affixes: diablo4.affixes, filters: activeFilters }),
|
|
[diablo4.affixes, activeFilters]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<section className="page-heading game-heading">
|
|
<div>
|
|
<GameBreadcrumb game={game} />
|
|
<div className="game-title-row">
|
|
<h1>Affixes</h1>
|
|
<span className="results-count">{visible.length} / {diablo4.affixes.length}</span>
|
|
<CopyChecklistItemsButton labels={visible.map((affix) => affix.label)} title="Copier les affixes visibles pour checklist" />
|
|
</div>
|
|
<p>Filtrez les affixes par nom et catégories pour retrouver rapidement les statistiques utiles à votre build.</p>
|
|
</div>
|
|
</section>
|
|
<section className="game-layout diablo4-layout" data-game-category="diablo4-affixes">
|
|
<aside className="game-filters">
|
|
<Diablo4Filters options={options} filters={activeFilters} setFilters={setFilters} />
|
|
</aside>
|
|
<section className="game-results" aria-live="polite">
|
|
<div className="game-grid diablo4-affix-grid">
|
|
{visible.length ? visible.map((affix) => (
|
|
<Diablo4AffixCard key={affix.id} affix={affix} categoryMap={diablo4.categoryMap} />
|
|
)) : (
|
|
<div className="empty">
|
|
<h2>Aucun résultat</h2>
|
|
<p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|