change json format & add diablo4

website/src/features/games/diablo4/Diablo4Listing.jsx

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { Diablo4AffixCard } from "./Diablo4AffixCard.jsx";
+import { Diablo4Filters } from "./Diablo4Filters.jsx";
+import { getCategoryLabel, getFilteredDiablo4Affixes } from "./utils.js";
+
+export function Diablo4Listing({ 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 mhwilds-heading">
+        <div>
+          <p className="eyebrow">Diablo IV</p>
+          <div className="mhwilds-title-row">
+            <h1>Affixes</h1>
+            <span className="results-count">{visible.length} / {diablo4.affixes.length}</span>
+          </div>
+          <p>Filtrez les affixes par nom et catégories pour retrouver rapidement les statistiques utiles à votre build.</p>
+        </div>
+      </section>
+      <section className="mhwilds-layout diablo4-layout" data-game-category="diablo4-affixes">
+        <aside className="mhwilds-filters">
+          <Diablo4Filters options={options} filters={activeFilters} setFilters={setFilters} />
+        </aside>
+        <section className="mhwilds-results" aria-live="polite">
+          <div className="mhwilds-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>
+    </>
+  );
+}