diff --git a/app/(content)/(gaming)/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
index 514228f1ab67bb6e644679b9450b020f04b36afc..5a6d45a275ca7032eae0f3893e292ee0fb6b2a5a 100644
--- a/app/(content)/(gaming)/games/[gameid]/page.tsx
+++ b/app/(content)/(gaming)/games/[gameid]/page.tsx
@@ -1,3 +1,4 @@
+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
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d6a5226f5e9cc09a2bd1ccbce465524e41f04345
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/package-lock.json b/package-lock.json
index 001892b66f10fbd42c7eaf42112fb808b8855921..4c363f412d49ba27721a1e350b0c2c5ce2a1f7d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@auth/prisma-adapter": "^1.0.0",
"@hookform/resolvers": "^3.1.0",
"@prisma/client": "^4.15.0",
+ "@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-label": "^2.0.2",
@@ -594,6 +595,29 @@
}
}
},
+ "node_modules/@radix-ui/react-aspect-ratio": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz",
+ "integrity": "sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==",
+ "dependencies": {
+ "@babel/runtime": "^7.13.10",
+ "@radix-ui/react-primitive": "1.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": "*",
+ "@types/react-dom": "*",
+ "react": "^16.8 || ^17.0 || ^18.0",
+ "react-dom": "^16.8 || ^17.0 || ^18.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@radix-ui/react-avatar": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.3.tgz",
diff --git a/package.json b/package.json
index ef91fe612a04aeae7a0bb9cdd7e79cb4098cbd5b..ef93b2320bb4e31b6054c51b24610d6eb37b85d4 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"@auth/prisma-adapter": "^1.0.0",
"@hookform/resolvers": "^3.1.0",
"@prisma/client": "^4.15.0",
+ "@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-avatar": "^1.0.3",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-label": "^2.0.2",