Skip to content
Snippets Groups Projects
Commit cbc1cb2b authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

detail view

parent e6d5f6d3
No related branches found
No related tags found
1 merge request!25Feat.games ui fixes
Pipeline #36952 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
app/(content)/(gaming)/games/[gameid]/page.tsx
+ 31
− 16
View file @ cbc1cb2b
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
components/ui/aspect-ratio.tsx 0 → 100644
+ 7
− 0
View file @ cbc1cb2b
"use client"
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
const AspectRatio = AspectRatioPrimitive.Root
export { AspectRatio }
package-lock.json
+ 24
− 0
View file @ cbc1cb2b
......@@ -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",
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment