diff --git a/package-lock.json b/package-lock.json
index ae800bc..8a0d03c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 3e9d670..e2f0a1d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/GameCard.tsx b/src/components/GameCard.tsx
index 7a74774..d9502cc 100644
--- a/src/components/GameCard.tsx
+++ b/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) => {
{game.name}
+ p.platform)} />
)
diff --git a/src/components/PlatformIconList.tsx b/src/components/PlatformIconList.tsx
new file mode 100644
index 0000000..df04e30
--- /dev/null
+++ b/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 (
+
+ {platforms.map((platform) => (
+
+ ))}
+
+ );
+};
+
+export default PlatformIconList;
diff --git a/src/hooks/useGames.ts b/src/hooks/useGames.ts
index 139159e..cca68b5 100644
--- a/src/hooks/useGames.ts
+++ b/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 {