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
+97 -75
View File
@@ -67,40 +67,40 @@ export function GamePageClient({
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>
</> </>
@@ -111,41 +111,41 @@ export function GamePageClient({
</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
@@ -159,21 +159,32 @@ export function GamePageClient({
: "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'>
{tab.label}
</span>
</button> </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}
platformSupport={platformSupport}
/>
)}
{activeTab === "benchmarks" && (
<BenchmarksTab count={counts.benchmarks} />
)}
{activeTab === "presets" && (
<PresetsTab count={counts.presets} />
)}
{activeTab === "comments" && (
<CommentsTab count={counts.comments} />
)} )}
{activeTab === "benchmarks" && <BenchmarksTab count={counts.benchmarks} />}
{activeTab === "presets" && <PresetsTab count={counts.presets} />}
{activeTab === "comments" && <CommentsTab count={counts.comments} />}
</div> </div>
</div> </div>
</div> </div>
@@ -191,10 +202,10 @@ function StatBadge({
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>
) )
} }
@@ -207,13 +218,13 @@ function OverviewTab({
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> </div>
@@ -222,19 +233,19 @@ function OverviewTab({
{/* Platform Support */} {/* Platform Support */}
{platformSupport.length > 0 && ( {platformSupport.length > 0 && (
<div> <div>
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3"> <h3 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
Platform Support Platform Support
</h3> </h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3"> <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3'>
{platformSupport.map((ps) => ( {platformSupport.map((ps) => (
<div <div
key={ps.id} key={ps.id}
className="flex items-center justify-between p-3 rounded-lg border border-border bg-text/5" className='flex items-center justify-between p-3 rounded-lg border border-border bg-text/5'
> >
<span className="text-sm font-medium capitalize"> <span className='text-sm font-medium capitalize'>
{ps.hardwareSlug.replace(/-/g, " ")} {ps.hardwareSlug.replace(/-/g, " ")}
</span> </span>
<div className="flex items-center gap-2"> <div className='flex items-center gap-2'>
<span <span
className={`text-xs px-2 py-0.5 rounded-full ${ className={`text-xs px-2 py-0.5 rounded-full ${
ps.isSupported ps.isSupported
@@ -242,9 +253,11 @@ function OverviewTab({
: "bg-red-500/20 text-red-400" : "bg-red-500/20 text-red-400"
}`} }`}
> >
{ps.isSupported ? "Supported" : "Unsupported"} {ps.isSupported
? "Supported"
: "Unsupported"}
</span> </span>
<span className="text-xs text-text/50 capitalize"> <span className='text-xs text-text/50 capitalize'>
{ps.protonStatus} {ps.protonStatus}
</span> </span>
</div> </div>
@@ -256,18 +269,27 @@ function OverviewTab({
{/* Metadata */} {/* Metadata */}
<div> <div>
<h3 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3"> <h3 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
Details Details
</h3> </h3>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm"> <div className='grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm'>
<MetaItem label="Source" value={game.source} /> <MetaItem
label='Source'
value={game.source}
/>
{game.steamAppId && ( {game.steamAppId && (
<MetaItem label="Steam AppID" value={String(game.steamAppId)} /> <MetaItem
label='Steam AppID'
value={String(game.steamAppId)}
/>
)} )}
<MetaItem label="Added" value={formatDate(game.createdAt)} /> <MetaItem
label='Added'
value={formatDate(game.createdAt)}
/>
{game.lastSync && ( {game.lastSync && (
<MetaItem <MetaItem
label="Last Sync" label='Last Sync (metadata)'
value={formatDate(game.lastSync)} value={formatDate(game.lastSync)}
icon={ClockIcon} icon={ClockIcon}
/> />
@@ -288,12 +310,12 @@ function MetaItem({
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>
@@ -308,16 +330,16 @@ function formatDate(value: string | null): string {
function BenchmarksTab({ count }: { count: number }) { function BenchmarksTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
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'>No benchmarks yet</p>
</div> </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"> <p className='text-text/40 text-sm'>
{count} benchmark{count !== 1 ? "s" : ""} — coming soon {count} benchmark{count !== 1 ? "s" : ""} — coming soon
</p> </p>
</div> </div>
@@ -327,16 +349,16 @@ function BenchmarksTab({ count }: { count: number }) {
function PresetsTab({ count }: { count: number }) { function PresetsTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
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'>No presets yet</p>
</div> </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"> <p className='text-text/40 text-sm'>
{count} preset{count !== 1 ? "s" : ""} — coming soon {count} preset{count !== 1 ? "s" : ""} — coming soon
</p> </p>
</div> </div>
@@ -346,16 +368,16 @@ function PresetsTab({ count }: { count: number }) {
function CommentsTab({ count }: { count: number }) { function CommentsTab({ count }: { count: number }) {
if (count === 0) { if (count === 0) {
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'>No comments yet</p>
</div> </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"> <p className='text-text/40 text-sm'>
{count} comment{count !== 1 ? "s" : ""} — coming soon {count} comment{count !== 1 ? "s" : ""} — coming soon
</p> </p>
</div> </div>