Building game cards

src/components/GameCard.tsx

@@ -0,0 +1,20 @@
+import { Card, CardBody, Heading, Image } from '@chakra-ui/react'
+import React from 'react'
+import { Game } from '../hooks/useGames'
+
+interface Props {
+  game: Game
+}
+
+const GameCard = ({ game }: Props) => {
+  return (
+    <Card borderRadius={10} overflow='hidden'>
+      <Image src={game.background_image} />
+      <CardBody>
+        <Heading fontSize='2xl'>{game.name}</Heading>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default GameCard

src/components/GameGrid.tsx

@@ -1,17 +1,22 @@
-import { Text } from "@chakra-ui/react";
+import { SimpleGrid, Text } from "@chakra-ui/react";
 import useGames from "../hooks/useGames";
+import GameCard from "./GameCard";
 
 const GameGrid = () => {
-  const {games, error} = useGames();
+  const { games, error } = useGames();
 
   return (
     <>
       {error && <Text>{error}</Text>}
-      <ul>
+      <SimpleGrid
+        columns={{ sm: 1, md: 2, lg: 3, xl: 5 }}
+        padding="10px"
+        spacing={10}
+      >
         {games.map((game) => (
-          <li key={game.id}>{game.name}</li>
+          <GameCard key={game.id} game={game} />
         ))}
-      </ul>
+      </SimpleGrid>
     </>
   );
 };

src/hooks/useGames.ts

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