frontend/src/components/GameEntry.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React from "react";
import { Link } from "react-router-dom";

import { Game, GameCategoryPortals } from "@customTypes/Game";
import "@css/Games.css";

import GameCategory from "@components/GameCategory";

interface GameEntryProps {
  game: Game;
}

const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
  const [catInfo, setCatInfo] = React.useState<GameCategoryPortals[]>([]);

  React.useEffect(() => {
    setCatInfo(game.category_portals);
  }, [game.category_portals]);

  return (
    <Link to={"/games/" + game.id}><div className='games-page-item'>
      <div className='games-page-item-header'>
        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
        <span><b>{game.name}</b></span>
      </div>
      <div id={game.id as any as string} className='games-page-item-body'>
        {catInfo.map((cat, index) => {
          return <GameCategory cat={cat} game={game} key={index}></GameCategory>;
        })}
      </div>
    </div></Link>
  );
};

export default GameEntry;