adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore: modify title

Browse Source
This commit is contained in:
adrianbonpin
2026-04-26 14:40:47 +08:00
parent 9aef6bed6a
commit 88cd5ef0e7
1 changed files with 317 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/game/[id]/game-page-client.tsx
+317 -295
View File
@@ -3,361 +3,383 @@
import { useCallback, useState } from "react" import { useCallback, useState } from "react"
import Image from "next/image" import Image from "next/image"
import { import {
Gamepad2Icon, Gamepad2Icon,
MessageSquareIcon, MessageSquareIcon,
SettingsIcon, SettingsIcon,
TrendingUpIcon, TrendingUpIcon,
ExternalLinkIcon, ExternalLinkIcon,
ClockIcon, ClockIcon,
} from "lucide-react" } from "lucide-react"
interface Game { interface Game {
id: string id: string
steamAppId: number | null steamAppId: number | null
title: string title: string
description: string | null description: string | null
developer: string | null developer: string | null
publisher: string | null publisher: string | null
genres: string[] | null genres: string[] | null
headerImage: string | null headerImage: string | null
capsuleImage: string | null capsuleImage: string | null
storeUrl: string | null storeUrl: string | null
source: string source: string
lastSync: string | null lastSync: string | null
syncStatus: string | null syncStatus: string | null
createdAt: string createdAt: string
} }
interface Counts { interface Counts {
benchmarks: number benchmarks: number
presets: number presets: number
comments: number comments: number
} }
interface PlatformSupport { interface PlatformSupport {
id: string id: string
gameId: string gameId: string
hardwareSlug: string hardwareSlug: string
isSupported: boolean isSupported: boolean
protonStatus: string protonStatus: string
} }
const TABS = [ const TABS = [
{ key: "overview", label: "Overview", icon: Gamepad2Icon }, { key: "overview", label: "Overview", icon: Gamepad2Icon },
{ key: "benchmarks", label: "Benchmarks", icon: TrendingUpIcon }, { key: "benchmarks", label: "Benchmarks", icon: TrendingUpIcon },
{ key: "presets", label: "Presets", icon: SettingsIcon }, { key: "presets", label: "Presets", icon: SettingsIcon },
{ key: "comments", label: "Comments", icon: MessageSquareIcon }, { key: "comments", label: "Comments", icon: MessageSquareIcon },
] as const ] as const
type TabKey = (typeof TABS)[number]["key"] type TabKey = (typeof TABS)[number]["key"]
export function GamePageClient({ export function GamePageClient({
game, game,
counts, counts,
platformSupport, platformSupport,
}: { }: {
game: Game game: Game
counts: Counts counts: Counts
platformSupport: PlatformSupport[] platformSupport: PlatformSupport[]
}) { }) {
const [activeTab, setActiveTab] = useState<TabKey>("overview") const [activeTab, setActiveTab] = useState<TabKey>("overview")
const [imgError, setImgError] = useState(false) const [imgError, setImgError] = useState(false)
const handleImgError = useCallback(() => setImgError(true), []) const handleImgError = useCallback(() => setImgError(true), [])
const headerImage = game.capsuleImage || game.headerImage const headerImage = game.capsuleImage || game.headerImage
return ( return (
<section className="w-full flex flex-col"> <section className='w-full flex flex-col'>
{/* Hero */} {/* Hero */}
<div className="relative w-full h-48 sm:h-64 md:h-80 overflow-hidden"> <div className='relative w-full h-48 sm:h-64 md:h-80 overflow-hidden'>
{headerImage && !imgError ? ( {headerImage && !imgError ? (
<Image <Image
src={headerImage} src={headerImage}
alt={game.title} alt={game.title}
fill fill
className="object-cover" className='object-cover'
priority priority
onError={handleImgError} onError={handleImgError}
/> />
) : ( ) : (
<div className="w-full h-full bg-text/10 flex items-center justify-center"> <div className='w-full h-full bg-text/10 flex items-center justify-center'>
<Gamepad2Icon className="h-16 w-16 text-text/20" /> <Gamepad2Icon className='h-16 w-16 text-text/20' />
</div> </div>
)} )}
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" /> <div className='absolute inset-0 bg-linear-to-t from-background via-background/60 to-transparent' />
<div className="absolute bottom-0 left-0 right-0 px-4 md:px-[10svw] pb-4"> <div className='absolute bottom-0 left-0 right-0 px-4 md:px-[10svw] pb-4'>
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2"> <h1 className='text-2xl sm:text-3xl md:text-4xl font-bold mb-2'>
{game.title} {game.title}
</h1> </h1>
<div className="flex flex-wrap items-center gap-3 text-sm text-text/70"> <div className='flex flex-wrap items-center gap-3 text-sm text-text/70'>
{game.developer && <span>{game.developer}</span>} {game.developer && <span>{game.developer}</span>}
{game.developer && game.publisher && ( {game.developer && game.publisher && (
<span className="text-text/40">•</span> <span className='text-text/40'>•</span>
)} )}
{game.publisher && <span>{game.publisher}</span>} {game.publisher && <span>{game.publisher}</span>}
{game.genres && game.genres.length > 0 && ( {game.genres && game.genres.length > 0 && (
<> <>
<span className="text-text/40">•</span> <span className='text-text/40'>•</span>
<span className="text-text/60"> <span className='text-text/60'>
{game.genres.join(", ")} {game.genres.join(", ")}
</span> </span>
</> </>
)} )}
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div>
{/* Stats bar */} {/* Stats bar */}
<div className="px-4 md:px-[10svw] border-b border-border"> <div className='px-4 md:px-[10svw] border-b border-border'>
<div className="max-w-7xl mx-auto flex flex-row gap-6 py-3 text-sm"> <div className='max-w-7xl mx-auto flex flex-row gap-6 py-3 text-sm'>
<StatBadge <StatBadge
icon={TrendingUpIcon} icon={TrendingUpIcon}
value={counts.benchmarks} value={counts.benchmarks}
label="Benchmarks" label='Benchmarks'
/> />
<StatBadge <StatBadge
icon={SettingsIcon} icon={SettingsIcon}
value={counts.presets} value={counts.presets}
label="Presets" label='Presets'
/> />
<StatBadge <StatBadge
icon={MessageSquareIcon} icon={MessageSquareIcon}
value={counts.comments} value={counts.comments}
label="Comments" label='Comments'
/> />
{game.storeUrl && ( {game.storeUrl && (
<a <a
href={game.storeUrl} href={game.storeUrl}
target="_blank" target='_blank'
rel="noopener noreferrer" rel='noopener noreferrer'
className="ml-auto flex items-center gap-1.5 text-text/60 hover:text-primary transition-colors" className='ml-auto flex items-center gap-1.5 text-text/60 hover:text-primary transition-colors'
> >
<ExternalLinkIcon className="h-3.5 w-3.5" /> <ExternalLinkIcon className='h-3.5 w-3.5' />
<span className="hidden sm:inline">Store</span> <span className='hidden sm:inline'>Store</span>
</a> </a>
)} )}
</div> </div>
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="px-4 md:px-[10svw]"> <div className='px-4 md:px-[10svw]'>
<div className="max-w-7xl mx-auto"> <div className='max-w-7xl mx-auto'>
<div className="flex flex-row gap-1 border-b border-border mt-4"> <div className='flex flex-row gap-1 border-b border-border mt-4'>
{TABS.map((tab) => { {TABS.map((tab) => {
const Icon = tab.icon const Icon = tab.icon
const isActive = activeTab === tab.key const isActive = activeTab === tab.key
return ( return (
<button <button
key={tab.key} key={tab.key}
onClick={() => setActiveTab(tab.key)} onClick={() => setActiveTab(tab.key)}
className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${ className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
isActive isActive
? "border-primary text-primary" ? "border-primary text-primary"
: "border-transparent text-text/60 hover:text-text/80" : "border-transparent text-text/60 hover:text-text/80"
}`} }`}
> >
<Icon className="h-4 w-4" /> <Icon className='h-4 w-4' />
<span className="hidden sm:inline">{tab.label}</span> <span className='hidden sm:inline'>
</button> {tab.label}
) </span>
})} </button>
</div> )
})}
</div>
{/* Tab content */} {/* Tab content */}
<div className="py-6 min-h-[300px]"> <div className='py-6 min-h-75'>
{activeTab === "overview" && ( {activeTab === "overview" && (
<OverviewTab game={game} platformSupport={platformSupport} /> <OverviewTab
)} game={game}
{activeTab === "benchmarks" && <BenchmarksTab count={counts.benchmarks} />} platformSupport={platformSupport}
{activeTab === "presets" && <PresetsTab count={counts.presets} />} />
{activeTab === "comments" && <CommentsTab count={counts.comments} />} )}
</div> {activeTab === "benchmarks" && (
</div> <BenchmarksTab count={counts.benchmarks} />
</div> )}
</section> {activeTab === "presets" && (
) <PresetsTab count={counts.presets} />
)}
{activeTab === "comments" && (
<CommentsTab count={counts.comments} />
)}
</div>
</div>
</div>
</section>
)
} }
function StatBadge({ function StatBadge({
icon: Icon, icon: Icon,
value, value,
label, label,
}: { }: {
icon: React.ElementType icon: React.ElementType
value: number value: number
label: string label: string
}) { }) {
return ( return (
<div className="flex items-center gap-1.5 text-text/70"> <div className='flex items-center gap-1.5 text-text/70'>
<Icon className="h-4 w-4 text-text/50" /> <Icon className='h-4 w-4 text-text/50' />
<span className="font-medium text-text">{value}</span> <span className='font-medium text-text'>{value}</span>
<span className="hidden sm:inline text-text/50">{label}</span> <span className='hidden sm:inline text-text/50'>{label}</span>
</div> </div>
) )
} }
function OverviewTab({ function OverviewTab({
game, game,
platformSupport, platformSupport,
}: { }: {
game: Game game: Game
platformSupport: PlatformSupport[] platformSupport: PlatformSupport[]
}) { }) {
return ( return (
<div className="flex flex-col gap-6"> <div className='flex flex-col gap-6'>
{game.description && ( {game.description && (
<div> <div>
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-2"> <h3 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-2'>
About About
</h3> </h3>
<p className="text-sm text-text/80 leading-relaxed max-w-3xl"> <p className='text-sm text-text/80 leading-relaxed max-w-3xl'>
{game.description} {game.description}
</p> </p>
</div>
)}
{/* Platform Support */}
{platformSupport.length > 0 && (
<div>
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3">
Platform Support
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
{platformSupport.map((ps) => (
<div
key={ps.id}
className="flex items-center justify-between p-3 rounded-lg border border-border bg-text/5"
>
<span className="text-sm font-medium capitalize">
{ps.hardwareSlug.replace(/-/g, " ")}
</span>
<div className="flex items-center gap-2">
<span
className={`text-xs px-2 py-0.5 rounded-full ${
ps.isSupported
? "bg-green-500/20 text-green-400"
: "bg-red-500/20 text-red-400"
}`}
>
{ps.isSupported ? "Supported" : "Unsupported"}
</span>
<span className="text-xs text-text/50 capitalize">
{ps.protonStatus}
</span>
</div> </div>
</div> )}
))}
</div>
</div>
)}
{/* Metadata */} {/* Platform Support */}
<div> {platformSupport.length > 0 && (
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3"> <div>
Details <h3 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
</h3> Platform Support
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm"> </h3>
<MetaItem label="Source" value={game.source} /> <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3'>
{game.steamAppId && ( {platformSupport.map((ps) => (
<MetaItem label="Steam AppID" value={String(game.steamAppId)} /> <div
)} key={ps.id}
<MetaItem label="Added" value={formatDate(game.createdAt)} /> className='flex items-center justify-between p-3 rounded-lg border border-border bg-text/5'
{game.lastSync && ( >
<MetaItem <span className='text-sm font-medium capitalize'>
label="Last Sync" {ps.hardwareSlug.replace(/-/g, " ")}
value={formatDate(game.lastSync)} </span>
icon={ClockIcon} <div className='flex items-center gap-2'>
/> <span
)} className={`text-xs px-2 py-0.5 rounded-full ${
ps.isSupported
? "bg-green-500/20 text-green-400"
: "bg-red-500/20 text-red-400"
}`}
>
{ps.isSupported
? "Supported"
: "Unsupported"}
</span>
<span className='text-xs text-text/50 capitalize'>
{ps.protonStatus}
</span>
</div>
</div>
))}
</div>
</div>
)}
{/* Metadata */}
<div>
<h3 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
Details
</h3>
<div className='grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm'>
<MetaItem
label='Source'
value={game.source}
/>
{game.steamAppId && (
<MetaItem
label='Steam AppID'
value={String(game.steamAppId)}
/>
)}
<MetaItem
label='Added'
value={formatDate(game.createdAt)}
/>
{game.lastSync && (
<MetaItem
label='Last Sync (metadata)'
value={formatDate(game.lastSync)}
icon={ClockIcon}
/>
)}
</div>
</div>
</div> </div>
</div> )
</div>
)
} }
function MetaItem({ function MetaItem({
label, label,
value, value,
icon: Icon, icon: Icon,
}: { }: {
label: string label: string
value: string value: string
icon?: React.ElementType icon?: React.ElementType
}) { }) {
return ( return (
<div className="flex flex-col gap-1"> <div className='flex flex-col gap-1'>
<span className="text-xs text-text/50 uppercase tracking-wider"> <span className='text-xs text-text/50 uppercase tracking-wider'>
{label} {label}
</span> </span>
<span className="text-text/80 flex items-center gap-1"> <span className='text-text/80 flex items-center gap-1'>
{Icon && <Icon className="h-3 w-3 text-text/40" />} {Icon && <Icon className='h-3 w-3 text-text/40' />}
{value} {value}
</span> </span>
</div> </div>
) )
} }
function formatDate(value: string | null): string { function formatDate(value: string | null): string {
if (!value) return "—" if (!value) return "—"
return new Date(value).toLocaleDateString() return new Date(value).toLocaleDateString()
} }
function BenchmarksTab({ count }: { count: number }) { function BenchmarksTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
return (
<div className='flex flex-col items-center justify-center py-20 gap-4'>
<TrendingUpIcon className='h-12 w-12 text-text/20' />
<p className='text-text/40 text-sm'>No benchmarks yet</p>
</div>
)
}
return ( return (
<div className="flex flex-col items-center justify-center py-20 gap-4"> <div className='flex flex-col items-center justify-center py-20 gap-4'>
<TrendingUpIcon className="h-12 w-12 text-text/20" /> <TrendingUpIcon className='h-12 w-12 text-text/20' />
<p className="text-text/40 text-sm">No benchmarks yet</p> <p className='text-text/40 text-sm'>
</div> {count} benchmark{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
) )
}
return (
<div className="flex flex-col items-center justify-center py-20 gap-4">
<TrendingUpIcon className="h-12 w-12 text-text/20" />
<p className="text-text/40 text-sm">
{count} benchmark{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
)
} }
function PresetsTab({ count }: { count: number }) { function PresetsTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
return (
<div className='flex flex-col items-center justify-center py-20 gap-4'>
<SettingsIcon className='h-12 w-12 text-text/20' />
<p className='text-text/40 text-sm'>No presets yet</p>
</div>
)
}
return ( return (
<div className="flex flex-col items-center justify-center py-20 gap-4"> <div className='flex flex-col items-center justify-center py-20 gap-4'>
<SettingsIcon className="h-12 w-12 text-text/20" /> <SettingsIcon className='h-12 w-12 text-text/20' />
<p className="text-text/40 text-sm">No presets yet</p> <p className='text-text/40 text-sm'>
</div> {count} preset{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
) )
}
return (
<div className="flex flex-col items-center justify-center py-20 gap-4">
<SettingsIcon className="h-12 w-12 text-text/20" />
<p className="text-text/40 text-sm">
{count} preset{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
)
} }
function CommentsTab({ count }: { count: number }) { function CommentsTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
return (
<div className='flex flex-col items-center justify-center py-20 gap-4'>
<MessageSquareIcon className='h-12 w-12 text-text/20' />
<p className='text-text/40 text-sm'>No comments yet</p>
</div>
)
}
return ( return (
<div className="flex flex-col items-center justify-center py-20 gap-4"> <div className='flex flex-col items-center justify-center py-20 gap-4'>
<MessageSquareIcon className="h-12 w-12 text-text/20" /> <MessageSquareIcon className='h-12 w-12 text-text/20' />
<p className="text-text/40 text-sm">No comments yet</p> <p className='text-text/40 text-sm'>
</div> {count} comment{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
) )
}
return (
<div className="flex flex-col items-center justify-center py-20 gap-4">
<MessageSquareIcon className="h-12 w-12 text-text/20" />
<p className="text-text/40 text-sm">
{count} comment{count !== 1 ? "s" : ""} — coming soon
</p>
</div>
)
} }