Displaying critic score

src/components/CriticScore.tsx

@@ -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

src/components/GameCard.tsx

@@ -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>
   )

src/hooks/useGames.ts

@@ -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 {