From 501205bf7e1df75155566cfd8ec11ec05d022d77 Mon Sep 17 00:00:00 2001
From: Cindy Sydney Bosibori <bosibori.sydney@gmail.com>
Date: Fri, 9 Aug 2024 12:59:13 +0300
Subject: [PATCH] feat: update game display section

---
 app/page.tsx                   | 5 +++++
 components/ui/ImageDisplay.tsx | 7 +++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 34d6b0a..88e832b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -31,6 +31,11 @@ const Home = () => {
       author: "by Author4",
       imageUrl: "/assets/cat4.jpeg"
     },
+    {
+      title: "Test Game 5",
+      author: "by Author5",
+      imageUrl: "/assets/test.jpeg"
+    },
   ];
   
   return (
diff --git a/components/ui/ImageDisplay.tsx b/components/ui/ImageDisplay.tsx
index 7795206..7c7e50f 100644
--- a/components/ui/ImageDisplay.tsx
+++ b/components/ui/ImageDisplay.tsx
@@ -1,4 +1,3 @@
-// components/ImageDisplay.tsx
 import React from 'react';
 import Image from 'next/image';
 
@@ -15,15 +14,15 @@ type ImageDisplayProps = {
 const ImageDisplay: React.FC<ImageDisplayProps> = ({ games }) => {
     return (
         <div className="container mx-auto px-4 py-4">
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                 {games.map((game, index) => (
                     <div key={index} className="bg-white rounded-lg shadow overflow-hidden">
                         <Image 
                             src={game.imageUrl} 
                             alt={game.title} 
                             width={500} 
-                            height={300} 
-                            className="w-full object-cover"
+                            height={200} 
+                            className="w-full h-48 object-contain p-4"
                         />
                         <div className="p-4">
                             <h5 className="text-lg font-bold">{game.title}</h5>