Genarrative/packages/shared/src/components/GameCard/index.tsx

import './style.css';

import type { ReactNode } from 'react';

import type { GameDistributionGame } from '../../contracts/gameDistribution';
import { GameRatingSummaryText } from '../GameRatingSummaryText';
export function GameCard({
  game,
  cover,
  onOpen,
}: {
  game: GameDistributionGame;
  cover: ReactNode;
  onOpen: () => void;
}) {
  return (
    <button type="button" className="game-card" onClick={onOpen}>
      {cover}
      <span className="game-card__body">
        <span className="game-card__title-row">
          <strong>{game.title}</strong>
          <span className="game-card__play-count">
            {game.playCount.toLocaleString()} 次游玩
          </span>
        </span>
        <span className="game-card__summary">{game.summary}</span>
        <span className="game-card__rating">
          <GameRatingSummaryText summary={game.ratingSummary} />
        </span>
        <span className="game-card__meta">
          <span>{game.category}</span>
          <span>·</span>
          <span>{game.author.name}</span>
        </span>
      </span>
    </button>
  );
}