Feat.games ui fixes

app/(content)/(gaming)/games/[gameid]/page.tsx

+import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { getGame } from "@/lib/igdb";
@@ -24,15 +25,15 @@ export default async function GameDetail({ params }: { params: { gameid: string
     return (
         <div className="main-content h-full">
             <Card className="w-full h-full overflow-hidden">
-                <div className="h-64 overflow-hidden -top-1/2">
-                    <div className="aspect-[889/500] relative block group">
+                <div className="h-64 overflow-hidden">
+                    <AspectRatio ratio={889 / 500}>
                         <Image
                             src={data[0].screenshots[0].url}
                             alt={data[0].name}
                             fill
                             priority
                             className="object-center" />
-                    </div>
+                    </AspectRatio>
                 </div>
                 <div className="p-6 md:p-12 ss:flex">
                     <div className="aspect-[264/374]">
@@ -45,23 +46,24 @@ export default async function GameDetail({ params }: { params: { gameid: string
                                 className="object-cover rounded-lg" />
                         </Card>
                     </div>
-                    <div className="ml-6 md:ml-12 grid items-start gap-2">
+                    <div className="ml-6 md:ml-12 space-y-3">
                         <h1 className="text-2xl font-bold">{data[0].name}</h1>
                         <h1>released on{' '}
                             <span className="font-semibold">{date}</span> by{' '}
                             <span className="font-semibold">{companies}</span>
                         </h1>
-                        <h1>{data[0].summary}</h1>
-                        <div className="mt-6 ">
-                            <h1>Genres</h1>
+                        <h1 className="pt-3">{data[0].summary}</h1>
+
+                        <div className="pt-6">
+                            <h1 className="mb-2">Genres</h1>
                             <div className="flex flex-wrap gap-2">
                                 {data[0].genres.map((genre, i) => {
                                     return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{genre.name}</Button>
                                 })}
                             </div>
                         </div>
-                        <div className="mt-6">
-                            <h1>Platforms</h1>
+                        <div className="pt-6">
+                            <h1 className="mb-2">Platforms</h1>
                             <div className="flex flex-wrap gap-2">
                                 {data[0].platforms.map((platform, i) => {
                                     return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{platform.name}</Button>
@@ -71,16 +73,29 @@ export default async function GameDetail({ params }: { params: { gameid: string
                     </div>
                 </div>
                 <div className="px-6 md:px-12">
-                    <div className="border-b border-gray-400 dark:border-gray-200" />
+                    {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
                     {/* comments */}
                 </div>
-            </Card>
-            <div>
-                <Card className="side-content">
-                    a
+            </Card >
+            <div className="side-content">
+                <Card className="p-6 grid items-start gap-2 bg-secondary">
+                    <h1>Screenshots</h1>
+                    <div className="grid grid-cols-1 gap-4">
+                        {data[0].screenshots.slice(1, 4).map((screenshot, i) => {
+                            return (
+                                <Card key={i} className="aspect-[264/374] relative block">
+                                    <Image
+                                        src={screenshot.url}
+                                        alt={data[0].name}
+                                        fill
+                                        priority
+                                        className="object-cover rounded-lg" />
+                                </Card>
+                            )
+                        })}
+                    </div>
                 </Card>
             </div>
-
-        </div>
+        </div >
     )
 }
\ No newline at end of file