diff --git a/app/(content)/(gaming)/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
index ef0ed17e93b9fd7bb362e6bd1e2e1664c4f661dc..4ca914b82157994c62b5419b25ffa336d8fb437d 100644
--- a/app/(content)/(gaming)/games/[gameid]/page.tsx
+++ b/app/(content)/(gaming)/games/[gameid]/page.tsx
@@ -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>
+ : <></>
}
/>
)
diff --git a/components/search/components/search-input.tsx b/components/search/components/search-input.tsx
index d5be323eabddd5667a56b614af33a0419bfcead9..af3bc04b1a0caa9796d6255d20c46bde528f2feb 100644
--- a/components/search/components/search-input.tsx
+++ b/components/search/components/search-input.tsx
@@ -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}`)