Add emojis

src/components/Emoji.tsx

@@ -0,0 +1,24 @@
+import bullsEye from '../assets/bulls-eye.webp';
+import thumbsUp from '../assets/thumbs-up.webp';
+import meh from '../assets/meh.webp';
+import { Image, ImageProps } from '@chakra-ui/react';
+
+interface Props {
+  rating: number;
+}
+
+const Emoji = ({ rating }: Props) => {
+  if (rating < 3) return null;
+
+  const emojiMap: { [key: number]: ImageProps } = {
+    3: { src: meh, alt: 'meh', boxSize: '25px' },
+    4: { src: thumbsUp, alt: 'recommended', boxSize: '25px' },
+    5: { src: bullsEye, alt: 'exceptional', boxSize: '35px' },
+  }
+
+  return (
+    <Image {...emojiMap[rating]} marginTop={1} />
+  )
+}
+
+export default Emoji

src/components/GameCard.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { Game } from '../hooks/useGames'
 import getCroppedImageUrl from '../services/image-url'
 import CriticScore from './CriticScore'
+import Emoji from './Emoji'
 import PlatformIconList from './PlatformIconList'
 
 interface Props {
@@ -18,7 +19,7 @@ const GameCard = ({ game }: Props) => {
           <PlatformIconList platforms={game.parent_platforms.map(p => p.platform)} />
           <CriticScore score={game.metacritic} />
         </HStack>
-        <Heading fontSize='2xl'>{game.name}</Heading>
+        <Heading fontSize='2xl'>{game.name}<Emoji rating={game.rating_top}/></Heading>
       </CardBody>
     </Card>
   )

src/hooks/useGames.ts

@@ -14,6 +14,7 @@ export interface Game {
   background_image: string;
   parent_platforms: { platform: Platform }[];
   metacritic: number;
+  rating_top: number;
 }
 
 const useGames = (gameQuery: GameQuery) =>