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

Merge branch 'asd' into 'main' 

Asd

See merge request !62
parents f1fd7d5a 07986317
No related branches found
No related tags found
1 merge request!62Asd
Pipeline #40276 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
app/(content)/(gaming)/games/[gameid]/page.tsx
+ 85
− 35
View file @ 92592018
......@@ -6,6 +6,7 @@ import { TryAgain } from "@/components/try-again"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { db } from "@/lib/db"
import { getGame } from "@/lib/igdb"
import { getCurrentUser } from "@/lib/session"
......@@ -29,12 +30,13 @@ export default async function GameDetail({ params }: { params: { gameid: string
}
})
const companies = data[0].involved_companies.map((company) => {
if (company !== data[0]?.involved_companies[0]) {
return `, ${company.company.name}`
}
return company.company.name
})
const companies = data[0].involved_companies &&
data[0].involved_companies.map((company) => {
if (company !== data[0]?.involved_companies[0]) {
return `, ${company.company.name}`
}
return company.company.name
})
return (
<GlobalLayout
......@@ -48,36 +50,53 @@ export default async function GameDetail({ params }: { params: { gameid: string
<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" />
</AspectRatio>
</div>
<div className="p-6 md:p-12 ss:flex">
<div className="aspect-[264/374]">
<Card className="aspect-[264/374] relative block group -mt-36 w-52 flex-shrink-0">
{data[0].screenshots[0] ?
<Image
src={data[0].cover.url ?? ""}
alt={data[0].name ?? ""}
src={data[0].screenshots[0]?.url}
alt={data[0].name}
fill
priority
className="object-cover rounded-lg" />
className="object-center" />
:
<Skeleton className="w-full h-full animate-none" />
}
</AspectRatio>
</div>
<div className="p-6 lg:p-12 lg:flex">
<div className="w-fit h-fit flex flex-row lg:flex-col lg:items-start mx-auto pb-6">
<Card className="aspect-[264/374] relative block group -mt-36 w-40 ss:w-44 lg:w-52 flex-shrink-0">
{data[0].cover.url ? (
<Image
src={data[0].cover.url}
alt={data[0].name}
fill
priority
className="object-cover rounded-lg"
/>
) : (
<Skeleton className="w-full h-full animate-none" />
)}
</Card>
<div className="flex flex-col space-y-6 justify-start p-6">
{user &&
<div className="flex flex-col space-y-6 justify-start pl-6 pt-6 pb-6 lg:p-6 w-full">
{user && (
<>
<AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
<AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />
<AddGameToFavList
userGameList={fullUser?.favGameList!}
gameId={params.gameid}
/>
</>
}
)}
</div>
</div>
<div className="ml-6 md:ml-12 space-y-3">
<div className="lg:ml-12 lg:mr-0 space-y-3">
<h1 className="text-2xl font-bold">{data[0].name ?? ""}</h1>
<div className="flex items-center">
<h1 className="pr-3">Global Rating:</h1>
<p className="bg-blue-700 text-white text-sm font-semibold inline-flex items-center p-1 rounded">{Math.round(data[0].total_rating)}</p>
</div>
{date && companies &&
<h1>released on{' '}
<span className="font-semibold">{date}</span> by{' '}
......@@ -86,25 +105,55 @@ export default async function GameDetail({ params }: { params: { gameid: string
}
<h1 className="pt-3">{data[0].summary ?? ""}</h1>
<div className="pt-6">
<h1 className="mb-2">Genres</h1>
{data[0].genres && data[0].genres.length === 0 &&
{data[0].genres && data[0].genres.length > 0 &&
<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="pt-6">
<h1 className="mb-2">Platforms</h1>
{data[0].platforms && data[0].platforms.length === 0 &&
</div>
}
{data[0].platforms && data[0].platforms.length > 0 &&
<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>
})}
</div>
</div>
}
<div className="lg:hidden">
{data[0].screenshots.length > 0 ?
// TODO: make this a carousel but also create media component
<>
<h1 className="pt-6 mb-2">Screenshots</h1>
<div className={`grid object-cover h-[500px] ${data[0].screenshots.length === 1 ? "grid-cols-1"
: data[0].screenshots.length === 2 ? "grid-cols-2 gap-3"
: data[0].screenshots.length === 3 || 4 ? "grid-cols-2 grid-rows-2 gap-3"
: ""
}`}
>
{data[0].screenshots.slice(0, 4).map((image, i) => {
const isFirstImage = data[0]?.screenshots.length === 3 && i === 0
return (
<Card key={i} className={`relative max-h-[500px] overflow-hidden ${isFirstImage ? "row-span-2" : ""}`}>
<Image
src={image.url as string}
alt="gweet image"
fill
className="object-cover rounded-lg"
/>
</Card>
)
})}
</div>
</>
: <></>
}
</div>
</div>
......@@ -112,7 +161,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
</Card >
}
sideContent={
sideContent={data[0].screenshots.length > 0 ?
<Card className="p-6 grid items-start gap-2 bg-secondary">
<h1>Screenshots</h1>
<div className="grid grid-cols-1 gap-4">
......@@ -130,6 +179,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
})}
</div>
</Card>
: <></>
}
/>
)
......
components/search/components/search-input.tsx
+ 1
− 1
View file @ 92592018
......@@ -32,7 +32,7 @@ export default function SearchInput({ className, ...props }: DocsSearchProps) {
}
const encoededQuery = encodeURIComponent(searchQuery)
router.push(`${pathname}?search=${encoededQuery}`)
router.push(`/games?search=${encoededQuery}`)
} else {
if (!searchQuery.trim()) return
router.push(`/search?query=${searchQuery}`)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment