Migrate to React/Vite & Sass

website/src/features/games/mhwilds/MhwildsListing.jsx

@@ -0,0 +1,52 @@
+import { useMemo } from "react";
+import { EndemicCard } from "./cards/EndemicCard.jsx";
+import { MonsterCard } from "./cards/MonsterCard.jsx";
+import { MhwildsFilters } from "./MhwildsFilters.jsx";
+import { getFilteredMhwildsItems, getUniqueConditionValues } from "./utils.js";
+
+export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
+  const isMonsters = category === "monsters";
+  const filterKey = isMonsters ? "weaknesses" : "locations";
+  const items = isMonsters ? mhwilds.monsters : mhwilds.endemic;
+  const options = getUniqueConditionValues(items, filterKey, t);
+  const visible = useMemo(() => getFilteredMhwildsItems({ category, mhwilds, filters, t }), [category, mhwilds, filters, t]);
+  const label = isMonsters ? t("monsters", { capitalize: true }) : t("endemic life", { capitalize: true });
+
+  return (
+    <>
+      <section className="page-heading mhwilds-heading">
+        <div>
+          <p className="eyebrow">Monster Hunter Wilds</p>
+          <div className="mhwilds-title-row">
+            <h1>{label}</h1>
+            <span className="results-count">{visible.length} / {items.length}</span>
+          </div>
+          <p>{isMonsters ? "Filtrez les monstres par nom et faiblesses, puis consultez leurs dégâts détaillés." : "Filtrez la faune par nom et zones d'apparition."}</p>
+        </div>
+        <div className="actions">
+          <a className={`button ${isMonsters ? "primary" : ""}`} href="#/games/mhwilds/monsters">Monstres</a>
+          <a className={`button ${!isMonsters ? "primary" : ""}`} href="#/games/mhwilds/endemic">Faune</a>
+        </div>
+      </section>
+      <section className="mhwilds-layout" data-mhwilds-category={category}>
+        <aside className="mhwilds-filters">
+          <MhwildsFilters category={category} filterKey={filterKey} options={options} filters={filters} setFilters={setFilters} t={t} />
+        </aside>
+        <section className="mhwilds-results" aria-live="polite">
+          <div className={`mhwilds-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
+            {visible.length ? visible.map((item) => (
+              isMonsters
+                ? <MonsterCard key={item.name} monster={item} t={t} />
+                : <EndemicCard key={item.name} item={item} t={t} />
+            )) : (
+              <div className="empty">
+                <h2>Aucun résultat</h2>
+                <p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
+              </div>
+            )}
+          </div>
+        </section>
+      </section>
+    </>
+  );
+}