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
36
37
38
39
40
41
42
43
|
import { Link } from "react-router-dom";
export type ImageRendering = "auto" | "crisp-edges" | "pixelated";
export type Tag = {
id: number,
tag_type: string,
name: string,
};
export type GameType = {
id: number,
title: string,
titleSlug: string,
description: string,
github_link: string,
img_rendering: ImageRendering,
status: string,
order: number,
created_at: string,
updated_at: string,
user_id: number,
tags: Tag[],
card_img: string,
char_img: string,
title_img: string,
};
export type GameCardProps = { link: string, game: GameType };
export default function GameCard ({ link, game }: GameCardProps)
{
return (
<>
<Link to={ link } role="button" className="block w-min pt-10 px-1">
<div className="gameCard">
<div className="gameCardWrapper">
<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=card`} className="gameCardCoverImg" />
</div>
<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=title`} className="gameTitleImg p-5%" />
<img style={{imageRendering: game.img_rendering}} src={`${import.meta.env.VITE_API_TITLE}/api/v1/games_img/realtradam/${game.titleSlug}.png?type=char`} className="gameCharacterImg" />
</div>
</Link>
</>
);
}
|
