34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
// Rôle : route vers les pages de jeux disponibles et leurs sous-pages.
|
|
import { GamesPage } from "./GamesPage.jsx";
|
|
import { Diablo4Page } from "./diablo4/Diablo4Page.jsx";
|
|
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 === "diablo4") return <Diablo4Page {...props} game={game} />;
|
|
if (game.id === "mhwilds") return <MhwildsPage {...props} game={game} />;
|
|
|
|
return (
|
|
<>
|
|
<section className="game-hero" style={heroStyle}>
|
|
<div>
|
|
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
|
|
<h1>{game.title}</h1>
|
|
<p>{game.summary}</p>
|
|
</div>
|
|
</section>
|
|
<section className="info-grid">
|
|
{game.sections.map((section) => (
|
|
<article className="info-panel" key={section.title}>
|
|
<h2>{section.title}</h2>
|
|
<ul>{section.items.map((item) => <li key={item}>{item}</li>)}</ul>
|
|
</article>
|
|
))}
|
|
</section>
|
|
</>
|
|
);
|
|
}
|