Displaying platform icons

package-lock.json

@@ -14,7 +14,8 @@
         "axios": "^1.3.4",
         "framer-motion": "^10.0.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1"
       },
       "devDependencies": {
         "@types/react": "^18.0.27",
@@ -2924,6 +2925,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -15,7 +15,8 @@
     "axios": "^1.3.4",
     "framer-motion": "^10.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

src/components/GameCard.tsx

@@ -1,6 +1,7 @@
-import { Card, CardBody, Heading, Image } from '@chakra-ui/react'
+import { Card, CardBody, Heading, Image, Text } from '@chakra-ui/react'
 import React from 'react'
 import { Game } from '../hooks/useGames'
+import PlatformIconList from './PlatformIconList'
 
 interface Props {
   game: Game
@@ -12,6 +13,7 @@ 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)} />
       </CardBody>
     </Card>
   )

src/components/PlatformIconList.tsx

@@ -0,0 +1,42 @@
+import {
+  FaWindows,
+  FaPlaystation,
+  FaXbox,
+  FaApple,
+  FaLinux,
+  FaAndroid,
+} from "react-icons/fa";
+import { MdPhoneIphone } from 'react-icons/md';
+import { SiNintendo } from 'react-icons/si';
+import { BsGlobe } from 'react-icons/bs';
+import { HStack, Icon } from "@chakra-ui/react";
+import { Platform } from "../hooks/useGames";
+import { IconType } from "react-icons";
+
+interface Props {
+  platforms: Platform[];
+}
+
+const PlatformIconList = ({ platforms }: Props) => {
+  const iconMap: { [key: string]: IconType } = { 
+    pc: FaWindows,
+    playstation: FaPlaystation,
+    xbox: FaXbox,
+    nintendo: SiNintendo,
+    mac: FaApple,
+    linux: FaLinux, 
+    android: FaAndroid,
+    ios: MdPhoneIphone,
+    web: BsGlobe
+  }
+
+  return (
+    <HStack marginY={1}> 
+      {platforms.map((platform) => (
+        <Icon as={iconMap[platform.slug]} color='gray.500'/>
+      ))}
+    </HStack>
+  );
+};
+
+export default PlatformIconList;

src/hooks/useGames.ts

@@ -2,10 +2,17 @@ import { CanceledError } from "axios";
 import { useEffect, useState } from "react";
 import apiClient from "../services/api-client";
 
+export interface Platform { 
+  id: number;
+  name: string;
+  slug: string;
+}
+
 export interface Game {
   id: number;
   name: string;
   background_image: string;
+  parent_platforms: { platform: Platform }[]
 }
 
 interface FetchGamesResponse {