48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
// Rôle : liste les jeux déclarés dans le contenu éditable.
|
|
export function GamesPage({ siteContent, games, gamesError }) {
|
|
const content = siteContent.gamesPage;
|
|
|
|
return (
|
|
<>
|
|
<section className="page-hero">
|
|
<div>
|
|
<p className="eyebrow">{content.eyebrow}</p>
|
|
<h1>{content.title}</h1>
|
|
<p>{content.description}</p>
|
|
</div>
|
|
</section>
|
|
<section className="game-list">
|
|
{games.length ? games.map((game) => (
|
|
<article className="card game-card" key={game.id}>
|
|
<a
|
|
className="card-cover game-card-cover game-card-cover-link"
|
|
href={`#/games/${game.id}`}
|
|
aria-label={`Ouvrir ${game.title}`}
|
|
title={`Ouvrir ${game.title}`}
|
|
style={{ "--game-cover": game.cover || "var(--gradient-nebula)" }}
|
|
>
|
|
{game.images?.cardCover || game.image ? (
|
|
<img src={game.images?.cardCover || game.image} alt={game.title} loading="lazy" />
|
|
) : (
|
|
<span className="game-card-placeholder" aria-hidden="true">{game.title}</span>
|
|
)}
|
|
</a>
|
|
<div className="card-body">
|
|
<p className="eyebrow">{game.eyebrow || "Guide de jeu"}</p>
|
|
<h2>{game.title}</h2>
|
|
<p>{game.summary}</p>
|
|
<div className="card-actions">
|
|
<a className="button primary" href={`#/games/${game.id}`}>Ouvrir</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)) : (
|
|
<div className="empty">
|
|
<h2>{content.emptyTitle}</h2>
|
|
<p>{gamesError || content.emptyText}</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</>
|
|
);
|
|
}
|