nicolabs/mosh-game-hub
1
0
Fork 0
mirror of https://github.com/mosh-hamedani/game-hub.git synced 2026-05-21 12:14:32 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Displaying critic score

Browse source
This commit is contained in:
Mosh Hamedani 2023-03-01 08:56:13 -08:00
parent a5edf66ee0
commit 9a9eb5d2a6
3 changed files with 23 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/CriticScore.tsx Normal file
View file

@ -0,0 +1,15 @@
import { Badge } from '@chakra-ui/react';
interface Props {
score: number;
}
const CriticScore = ({ score }: Props) => {
let color = score > 75 ? 'green' : score > 60 ? 'yellow' : '';
return (
<Badge colorScheme={color} fontSize='14px' paddingX={2} borderRadius='4px'>{score}</Badge>
)
}
export default CriticScore

8
src/components/GameCard.tsx
View file

@ -1,6 +1,7 @@
import { Card, CardBody, Heading, Image, Text } from '@chakra-ui/react'
import { Card, CardBody, Heading, HStack, Image, Text } from '@chakra-ui/react'
import React from 'react'
import { Game } from '../hooks/useGames'
import CriticScore from './CriticScore'
import PlatformIconList from './PlatformIconList'
interface Props {
@ -13,7 +14,10 @@ const GameCard = ({ game }: Props) => {
<Image src={game.background_image} />
<CardBody>
<Heading fontSize='2xl'>{game.name}</Heading>
<PlatformIconList platforms={game.parent_platforms.map(p => p.platform)} />
<HStack justifyContent='space-between'>
<PlatformIconList platforms={game.parent_platforms.map(p => p.platform)} />
<CriticScore score={game.metacritic} />
</HStack>
</CardBody>
</Card>
)

3
src/hooks/useGames.ts
View file

@ -12,7 +12,8 @@ export interface Game {
id: number;
name: string;
background_image: string;
parent_platforms: { platform: Platform }[]
parent_platforms: { platform: Platform }[];
metacritic: number;
}
interface FetchGamesResponse {