Refactor: remove duplicated styles

src/components/GameCard.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const GameCard = ({ game }: Props) => {
   return (
-    <Card width='300px' borderRadius={10} overflow='hidden'>
+    <Card>
       <Image src={getCroppedImageUrl(game.background_image)} />
       <CardBody>
         <Heading fontSize='2xl'>{game.name}</Heading>

src/components/GameCardContainer.tsx

@@ -0,0 +1,16 @@
+import { Box } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+const GameCardContainer = ({ children }: Props) => {
+  return (
+    <Box width="300px" borderRadius={10} overflow="hidden">
+      {children}
+    </Box>
+  );
+};
+
+export default GameCardContainer;

src/components/GameCardSkeleton.tsx

@@ -2,7 +2,7 @@ import { Card, CardBody, Skeleton, SkeletonText } from '@chakra-ui/react'
 
 const GameCardSkeleton = () => {
   return (
-    <Card width='300px' borderRadius={10} overflow='hidden'>
+    <Card>
       <Skeleton height="200px" />
       <CardBody>
         <SkeletonText />

src/components/GameGrid.tsx

@@ -1,6 +1,7 @@
 import { SimpleGrid, Text } from "@chakra-ui/react";
 import useGames from "../hooks/useGames";
 import GameCard from "./GameCard";
+import GameCardContainer from "./GameCardContainer";
 import GameCardSkeleton from "./GameCardSkeleton";
 
 const GameGrid = () => {
@@ -16,9 +17,15 @@ const GameGrid = () => {
         spacing={10}
       >
         {isLoading &&
-          skeletons.map((skeleton) => <GameCardSkeleton key={skeleton} />)}
+          skeletons.map((skeleton) => (
+            <GameCardContainer>
+              <GameCardSkeleton key={skeleton} />
+            </GameCardContainer>
+          ))}
         {games.map((game) => (
+          <GameCardContainer>
             <GameCard key={game.id} game={game} />
+          </GameCardContainer>
         ))}
       </SimpleGrid>
     </>