design refacto
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s

This commit is contained in:
Shinuwa 2026-07-22 16:07:10 +02:00
parent b8d1829bc7
commit d359fd0a35
25 changed files with 1340 additions and 1023 deletions

View file

@ -4,13 +4,14 @@ import { MhwildsPage } from "./mhwilds/MhwildsPage.jsx";
export function GameRoute(props) {
const { gameId, games } = props;
const game = games.find((item) => item.id === gameId);
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
if (!game) return <GamesPage {...props} />;
if (game.id === "mhwilds") return <MhwildsPage {...props} />;
if (game.id === "mhwilds") return <MhwildsPage {...props} game={game} />;
return (
<>
<section className="game-hero" style={{ background: game.cover }}>
<section className="game-hero" style={heroStyle}>
<div>
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
<h1>{game.title}</h1>

View file

@ -3,7 +3,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
return (
<>
<section className="page-heading">
<section className="page-hero">
<div>
<p className="eyebrow">{content.eyebrow}</p>
<h1>{content.title}</h1>
@ -20,7 +20,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
title={`Ouvrir ${game.title}`}
style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
>
<img src={game.image || ""} alt={game.title} loading="lazy" />
<img src={game.images?.cardCover || game.image || ""} alt={game.title} loading="lazy" />
</a>
<div className="card-body">
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>

View file

@ -1,9 +1,11 @@
import { assetPath } from "./utils.js";
export function MhwildsOverview() {
export function MhwildsOverview({ game }) {
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
return (
<>
<section className="game-hero mhwilds-hero">
<section className="game-hero" style={heroStyle}>
<div>
<p className="eyebrow">Guide de jeu</p>
<h1>Monster Hunter: Wilds</h1>

View file

@ -1,13 +1,14 @@
import { MhwildsListing } from "./MhwildsListing.jsx";
import { MhwildsOverview } from "./MhwildsOverview.jsx";
export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
export function MhwildsPage({ category, game, mhwilds, filters, setFilters, t }) {
const activeCategory = category === "monsters" || category === "endemic" ? category : "";
const heroStyle = game?.images?.heroBg ? { "--game-hero-image": `url("${game.images.heroBg}")` } : undefined;
if (!mhwilds.loaded) {
return (
<>
<section className="game-hero mhwilds-hero">
<section className="game-hero" style={heroStyle}>
<div>
<p className="eyebrow">Monster Hunter Wilds</p>
<h1>Monster Hunter: Wilds</h1>
@ -31,7 +32,7 @@ export function MhwildsPage({ category, mhwilds, filters, setFilters, t }) {
);
}
if (!activeCategory) return <MhwildsOverview />;
if (!activeCategory) return <MhwildsOverview game={game} />;
return (
<MhwildsListing