chore: modify title
This commit is contained in:
@@ -67,40 +67,40 @@ export function GamePageClient({
|
||||
const headerImage = game.capsuleImage || game.headerImage
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col">
|
||||
<section className='w-full flex flex-col'>
|
||||
{/* 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 ? (
|
||||
<Image
|
||||
src={headerImage}
|
||||
alt={game.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
className='object-cover'
|
||||
priority
|
||||
onError={handleImgError}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-text/10 flex items-center justify-center">
|
||||
<Gamepad2Icon className="h-16 w-16 text-text/20" />
|
||||
<div className='w-full h-full bg-text/10 flex items-center justify-center'>
|
||||
<Gamepad2Icon className='h-16 w-16 text-text/20' />
|
||||
</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="max-w-7xl mx-auto">
|
||||
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2">
|
||||
<div className='absolute bottom-0 left-0 right-0 px-4 md:px-[10svw] pb-4'>
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<h1 className='text-2xl sm:text-3xl md:text-4xl font-bold mb-2'>
|
||||
{game.title}
|
||||
</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 && game.publisher && (
|
||||
<span className="text-text/40">•</span>
|
||||
<span className='text-text/40'>•</span>
|
||||
)}
|
||||
{game.publisher && <span>{game.publisher}</span>}
|
||||
{game.genres && game.genres.length > 0 && (
|
||||
<>
|
||||
<span className="text-text/40">•</span>
|
||||
<span className="text-text/60">
|
||||
<span className='text-text/40'>•</span>
|
||||
<span className='text-text/60'>
|
||||
{game.genres.join(", ")}
|
||||
</span>
|
||||
</>
|
||||
@@ -111,41 +111,41 @@ export function GamePageClient({
|
||||
</div>
|
||||
|
||||
{/* Stats bar */}
|
||||
<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='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'>
|
||||
<StatBadge
|
||||
icon={TrendingUpIcon}
|
||||
value={counts.benchmarks}
|
||||
label="Benchmarks"
|
||||
label='Benchmarks'
|
||||
/>
|
||||
<StatBadge
|
||||
icon={SettingsIcon}
|
||||
value={counts.presets}
|
||||
label="Presets"
|
||||
label='Presets'
|
||||
/>
|
||||
<StatBadge
|
||||
icon={MessageSquareIcon}
|
||||
value={counts.comments}
|
||||
label="Comments"
|
||||
label='Comments'
|
||||
/>
|
||||
{game.storeUrl && (
|
||||
<a
|
||||
href={game.storeUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="ml-auto flex items-center gap-1.5 text-text/60 hover:text-primary transition-colors"
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
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" />
|
||||
<span className="hidden sm:inline">Store</span>
|
||||
<ExternalLinkIcon className='h-3.5 w-3.5' />
|
||||
<span className='hidden sm:inline'>Store</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="px-4 md:px-[10svw]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-row gap-1 border-b border-border mt-4">
|
||||
<div className='px-4 md:px-[10svw]'>
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<div className='flex flex-row gap-1 border-b border-border mt-4'>
|
||||
{TABS.map((tab) => {
|
||||
const Icon = tab.icon
|
||||
const isActive = activeTab === tab.key
|
||||
@@ -159,21 +159,32 @@ export function GamePageClient({
|
||||
: "border-transparent text-text/60 hover:text-text/80"
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{tab.label}</span>
|
||||
<Icon className='h-4 w-4' />
|
||||
<span className='hidden sm:inline'>
|
||||
{tab.label}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Tab content */}
|
||||
<div className="py-6 min-h-[300px]">
|
||||
<div className='py-6 min-h-75'>
|
||||
{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>
|
||||
@@ -191,10 +202,10 @@ function StatBadge({
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 text-text/70">
|
||||
<Icon className="h-4 w-4 text-text/50" />
|
||||
<span className="font-medium text-text">{value}</span>
|
||||
<span className="hidden sm:inline text-text/50">{label}</span>
|
||||
<div className='flex items-center gap-1.5 text-text/70'>
|
||||
<Icon className='h-4 w-4 text-text/50' />
|
||||
<span className='font-medium text-text'>{value}</span>
|
||||
<span className='hidden sm:inline text-text/50'>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -207,13 +218,13 @@ function OverviewTab({
|
||||
platformSupport: PlatformSupport[]
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className='flex flex-col gap-6'>
|
||||
{game.description && (
|
||||
<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
|
||||
</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}
|
||||
</p>
|
||||
</div>
|
||||
@@ -222,19 +233,19 @@ function OverviewTab({
|
||||
{/* Platform Support */}
|
||||
{platformSupport.length > 0 && (
|
||||
<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
|
||||
</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) => (
|
||||
<div
|
||||
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, " ")}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className='flex items-center gap-2'>
|
||||
<span
|
||||
className={`text-xs px-2 py-0.5 rounded-full ${
|
||||
ps.isSupported
|
||||
@@ -242,9 +253,11 @@ function OverviewTab({
|
||||
: "bg-red-500/20 text-red-400"
|
||||
}`}
|
||||
>
|
||||
{ps.isSupported ? "Supported" : "Unsupported"}
|
||||
{ps.isSupported
|
||||
? "Supported"
|
||||
: "Unsupported"}
|
||||
</span>
|
||||
<span className="text-xs text-text/50 capitalize">
|
||||
<span className='text-xs text-text/50 capitalize'>
|
||||
{ps.protonStatus}
|
||||
</span>
|
||||
</div>
|
||||
@@ -256,18 +269,27 @@ function OverviewTab({
|
||||
|
||||
{/* Metadata */}
|
||||
<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
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm">
|
||||
<MetaItem label="Source" value={game.source} />
|
||||
<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='Steam AppID'
|
||||
value={String(game.steamAppId)}
|
||||
/>
|
||||
)}
|
||||
<MetaItem label="Added" value={formatDate(game.createdAt)} />
|
||||
<MetaItem
|
||||
label='Added'
|
||||
value={formatDate(game.createdAt)}
|
||||
/>
|
||||
{game.lastSync && (
|
||||
<MetaItem
|
||||
label="Last Sync"
|
||||
label='Last Sync (metadata)'
|
||||
value={formatDate(game.lastSync)}
|
||||
icon={ClockIcon}
|
||||
/>
|
||||
@@ -288,12 +310,12 @@ function MetaItem({
|
||||
icon?: React.ElementType
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs text-text/50 uppercase tracking-wider">
|
||||
<div className='flex flex-col gap-1'>
|
||||
<span className='text-xs text-text/50 uppercase tracking-wider'>
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-text/80 flex items-center gap-1">
|
||||
{Icon && <Icon className="h-3 w-3 text-text/40" />}
|
||||
<span className='text-text/80 flex items-center gap-1'>
|
||||
{Icon && <Icon className='h-3 w-3 text-text/40' />}
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
@@ -308,16 +330,16 @@ function formatDate(value: string | null): string {
|
||||
function BenchmarksTab({ count }: { count: number }) {
|
||||
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 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 (
|
||||
<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">
|
||||
<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>
|
||||
@@ -327,16 +349,16 @@ function BenchmarksTab({ count }: { count: number }) {
|
||||
function PresetsTab({ count }: { count: number }) {
|
||||
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 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 (
|
||||
<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">
|
||||
<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>
|
||||
@@ -346,16 +368,16 @@ function PresetsTab({ count }: { count: number }) {
|
||||
function CommentsTab({ count }: { count: number }) {
|
||||
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 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 (
|
||||
<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">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user