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 {