feat: transfer admin check to middleware and add vertical padding
This commit is contained in:
+12
-20
@@ -1,11 +1,11 @@
|
||||
import { redirect } from "next/navigation"
|
||||
import { headers } from "next/headers"
|
||||
import { auth } from "@/lib/auth"
|
||||
import { AdminSidebar } from "@/components/admin/admin-sidebar"
|
||||
import type { Metadata } from "next"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: { template: "%s | Admin — DeckyVault", default: "Admin — DeckyVault" },
|
||||
title: {
|
||||
template: "%s | Admin — DeckyVault",
|
||||
default: "Admin — DeckyVault",
|
||||
},
|
||||
robots: { index: false, follow: false },
|
||||
}
|
||||
|
||||
@@ -14,29 +14,21 @@ export default async function AdminLayout({
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: await headers(),
|
||||
})
|
||||
|
||||
if (!session || session.user.role !== "admin") {
|
||||
redirect("/")
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col gap-8 pb-16">
|
||||
<div className="px-4 md:px-[10svw]">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">Admin</h1>
|
||||
<p className="text-sm text-text/60 mt-1">
|
||||
<section className='w-full flex flex-col gap-8 py-16'>
|
||||
<div className='px-4 md:px-[10svw]'>
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<h1 className='text-2xl sm:text-3xl font-bold'>Admin</h1>
|
||||
<p className='text-sm text-text/60 mt-1'>
|
||||
Manage users, hardware, and games
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-4 md:px-[10svw]">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-6">
|
||||
<div className='px-4 md:px-[10svw]'>
|
||||
<div className='max-w-7xl mx-auto flex flex-col md:flex-row gap-6'>
|
||||
<AdminSidebar />
|
||||
<div className="flex-1 min-w-0">{children}</div>
|
||||
<div className='flex-1 min-w-0'>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -127,7 +127,9 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
|
||||
splitLine: {
|
||||
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
|
||||
},
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
@@ -139,7 +141,10 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: deviceColor + "40" },
|
||||
{ offset: 1, color: deviceColor + "05" },
|
||||
@@ -168,21 +173,36 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
type: "category",
|
||||
data: stats.boxplot.map((b) => b.gameTitle),
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 10, rotate: 30 },
|
||||
axisLabel: {
|
||||
color: CHART_THEME.textMuted,
|
||||
fontSize: 10,
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "FPS",
|
||||
axisLine: { lineStyle: { color: CHART_THEME.border } },
|
||||
splitLine: { lineStyle: { color: CHART_THEME.border, opacity: 0.3 } },
|
||||
splitLine: {
|
||||
lineStyle: { color: CHART_THEME.border, opacity: 0.3 },
|
||||
},
|
||||
axisLabel: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
nameTextStyle: { color: CHART_THEME.textMuted, fontSize: 11 },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "boxplot",
|
||||
data: stats.boxplot.map((b) => [b.min, b.q1, b.median, b.q3, b.max]),
|
||||
itemStyle: { color: deviceColor + "30", borderColor: deviceColor },
|
||||
data: stats.boxplot.map((b) => [
|
||||
b.min,
|
||||
b.q1,
|
||||
b.median,
|
||||
b.q3,
|
||||
b.max,
|
||||
]),
|
||||
itemStyle: {
|
||||
color: deviceColor + "30",
|
||||
borderColor: deviceColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -206,12 +226,17 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
name: g.genre,
|
||||
value: g.count,
|
||||
itemStyle: {
|
||||
color: CHART_THEME.deviceColors[i % CHART_THEME.deviceColors.length],
|
||||
color: CHART_THEME.deviceColors[
|
||||
i % CHART_THEME.deviceColors.length
|
||||
],
|
||||
},
|
||||
})),
|
||||
label: { color: CHART_THEME.textMuted, fontSize: 10 },
|
||||
emphasis: {
|
||||
itemStyle: { shadowBlur: 10, shadowColor: "rgba(0,0,0,0.5)" },
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0,0,0,0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -219,18 +244,18 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
}, [stats])
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col gap-8 pb-16">
|
||||
<section className='w-full flex flex-col gap-8 py-16'>
|
||||
{/* Hero Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<div className='flex items-center gap-4 mb-2'>
|
||||
<div
|
||||
className="flex items-center justify-center h-14 w-14 rounded-xl shrink-0"
|
||||
className='flex items-center justify-center h-14 w-14 rounded-xl shrink-0'
|
||||
style={{ background: `${deviceColor}15` }}
|
||||
>
|
||||
{device.image ? (
|
||||
@@ -239,33 +264,42 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
alt={device.name}
|
||||
width={56}
|
||||
height={56}
|
||||
className="object-contain"
|
||||
className='object-contain'
|
||||
/>
|
||||
) : (
|
||||
<Gamepad2Icon className="h-7 w-7" style={{ color: deviceColor }} />
|
||||
<Gamepad2Icon
|
||||
className='h-7 w-7'
|
||||
style={{ color: deviceColor }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">{device.name}</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<h1 className='text-2xl sm:text-3xl font-bold'>
|
||||
{device.name}
|
||||
</h1>
|
||||
<div className='flex items-center gap-2 mt-1'>
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border capitalize ${
|
||||
deviceTypeColor[device.deviceType] || "text-text/50 bg-text/5 border-border"
|
||||
deviceTypeColor[device.deviceType] ||
|
||||
"text-text/50 bg-text/5 border-border"
|
||||
}`}
|
||||
>
|
||||
<Gamepad2Icon className="h-3 w-3" />
|
||||
{deviceTypeLabel[device.deviceType] || device.deviceType}
|
||||
<Gamepad2Icon className='h-3 w-3' />
|
||||
{deviceTypeLabel[device.deviceType] ||
|
||||
device.deviceType}
|
||||
</span>
|
||||
{stats && stats.verifiedCount > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20">
|
||||
<CheckCircleIcon className="h-3 w-3" />
|
||||
<span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-500/10 text-blue-400 border border-blue-500/20'>
|
||||
<CheckCircleIcon className='h-3 w-3' />
|
||||
{stats.verifiedCount} verified
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-text/60">Performance benchmarks and statistics</p>
|
||||
<p className='text-sm text-text/60'>
|
||||
Performance benchmarks and statistics
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@@ -275,35 +309,55 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.05 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-wrap gap-4">
|
||||
<StatCard icon={DatabaseIcon} label="Total Benchmarks" value={String(stats.totalBenchmarks)} />
|
||||
<StatCard icon={TrendingUpIcon} label="Average FPS" value={stats.avgFps !== null ? String(stats.avgFps) : "—"} />
|
||||
<StatCard icon={MonitorIcon} label="Games Tested" value={String(stats.gameCount)} />
|
||||
<StatCard icon={CheckCircleIcon} label="Verified" value={String(stats.verifiedCount)} />
|
||||
<div className='max-w-7xl mx-auto flex flex-wrap gap-4'>
|
||||
<StatCard
|
||||
icon={DatabaseIcon}
|
||||
label='Total Benchmarks'
|
||||
value={String(stats.totalBenchmarks)}
|
||||
/>
|
||||
<StatCard
|
||||
icon={TrendingUpIcon}
|
||||
label='Average FPS'
|
||||
value={
|
||||
stats.avgFps !== null
|
||||
? String(stats.avgFps)
|
||||
: "—"
|
||||
}
|
||||
/>
|
||||
<StatCard
|
||||
icon={MonitorIcon}
|
||||
label='Games Tested'
|
||||
value={String(stats.gameCount)}
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircleIcon}
|
||||
label='Verified'
|
||||
value={String(stats.verifiedCount)}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
<div className='flex items-center justify-center py-16'>
|
||||
<Loader2 className='h-8 w-8 animate-spin text-primary' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{error && !loading && (
|
||||
<div className="px-4 md:px-[10svw]">
|
||||
<div className="max-w-7xl mx-auto text-center py-16 text-text/40">
|
||||
<Gamepad2Icon className="h-10 w-10 mx-auto mb-3" />
|
||||
<p className="text-text/60 mb-4">{error}</p>
|
||||
<div className='px-4 md:px-[10svw]'>
|
||||
<div className='max-w-7xl mx-auto text-center py-16 text-text/40'>
|
||||
<Gamepad2Icon className='h-10 w-10 mx-auto mb-3' />
|
||||
<p className='text-text/60 mb-4'>{error}</p>
|
||||
<button
|
||||
onClick={fetchStats}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer"
|
||||
className='inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary/10 text-primary text-sm font-medium hover:bg-primary/20 transition-colors cursor-pointer'
|
||||
>
|
||||
<RefreshCwIcon className="h-4 w-4" />
|
||||
<RefreshCwIcon className='h-4 w-4' />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
@@ -316,48 +370,75 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col gap-6">
|
||||
<div className='max-w-7xl mx-auto flex flex-col gap-6'>
|
||||
{stats.historical.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">Historical Performance</h3>
|
||||
<EChartWrapper option={historicalOption} height={280} />
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Historical Performance
|
||||
</h3>
|
||||
<EChartWrapper
|
||||
option={historicalOption}
|
||||
height={280}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
||||
{stats.boxplot.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">FPS Distribution by Game</h3>
|
||||
<EChartWrapper option={boxplotOption} height={300} />
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
FPS Distribution by Game
|
||||
</h3>
|
||||
<EChartWrapper
|
||||
option={boxplotOption}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{stats.genreBreakdown.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">Genre Breakdown</h3>
|
||||
<EChartWrapper option={genreOption} height={300} />
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Genre Breakdown
|
||||
</h3>
|
||||
<EChartWrapper
|
||||
option={genreOption}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(stats.protonBreakdown.length > 0 || stats.upscalerBreakdown.length > 0) && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{(stats.protonBreakdown.length > 0 ||
|
||||
stats.upscalerBreakdown.length > 0) && (
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
||||
{stats.protonBreakdown.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-3">Proton Version Distribution</h3>
|
||||
<div className="space-y-2">
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-3'>
|
||||
Proton Version Distribution
|
||||
</h3>
|
||||
<div className='space-y-2'>
|
||||
{stats.protonBreakdown.map((p) => (
|
||||
<div key={p.version} className="flex items-center justify-between text-sm">
|
||||
<span className="text-text/70">{p.version}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-24 h-1.5 rounded-full bg-text/10 overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary"
|
||||
style={{ width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%` }}
|
||||
key={p.version}
|
||||
className='flex items-center justify-between text-sm'
|
||||
>
|
||||
<span className='text-text/70'>
|
||||
{p.version}
|
||||
</span>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className='w-24 h-1.5 rounded-full bg-text/10 overflow-hidden'>
|
||||
<div
|
||||
className='h-full rounded-full bg-primary'
|
||||
style={{
|
||||
width: `${Math.max(5, (p.count / stats.totalBenchmarks) * 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-text/50 text-xs">{p.count}</span>
|
||||
<span className='text-text/50 text-xs'>
|
||||
{p.count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -365,20 +446,34 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
</div>
|
||||
)}
|
||||
{stats.upscalerBreakdown.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-3">Upscaler Performance</h3>
|
||||
<div className="space-y-2">
|
||||
{stats.upscalerBreakdown.map((f) => (
|
||||
<div key={f.upscalerType} className="flex items-center justify-between text-sm">
|
||||
<span className="text-text/70 capitalize">
|
||||
{f.upscalerType === "none" ? "Native" : f.upscalerType.toUpperCase()}
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-3'>
|
||||
Upscaler Performance
|
||||
</h3>
|
||||
<div className='space-y-2'>
|
||||
{stats.upscalerBreakdown.map(
|
||||
(f) => (
|
||||
<div
|
||||
key={f.upscalerType}
|
||||
className='flex items-center justify-between text-sm'
|
||||
>
|
||||
<span className='text-text/70 capitalize'>
|
||||
{f.upscalerType ===
|
||||
"none"
|
||||
? "Native"
|
||||
: f.upscalerType.toUpperCase()}
|
||||
</span>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-text/80 font-medium tabular-nums'>
|
||||
{f.avgFps} FPS
|
||||
</span>
|
||||
<span className='text-text/40 text-xs'>
|
||||
({f.count})
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-text/80 font-medium tabular-nums">{f.avgFps} FPS</span>
|
||||
<span className="text-text/40 text-xs">({f.count})</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -386,28 +481,44 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
)}
|
||||
|
||||
{stats.topGames.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-3">Top Games by Average FPS</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{stats.topGames.slice(0, 8).map((game, i) => (
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-3'>
|
||||
Top Games by Average FPS
|
||||
</h3>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3'>
|
||||
{stats.topGames
|
||||
.slice(0, 8)
|
||||
.map((game, i) => (
|
||||
<Link
|
||||
key={game.gameId}
|
||||
href={`/game/${game.gameId}`}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group"
|
||||
className='flex items-center gap-3 p-3 rounded-lg bg-text/5 border border-border hover:border-primary/30 transition-colors group'
|
||||
>
|
||||
<div
|
||||
className='text-lg font-bold tabular-nums w-6'
|
||||
style={{
|
||||
color: deviceColor,
|
||||
}}
|
||||
>
|
||||
<div className="text-lg font-bold tabular-nums w-6" style={{ color: deviceColor }}>
|
||||
{i + 1}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate group-hover:text-primary transition-colors">
|
||||
<div className='min-w-0 flex-1'>
|
||||
<p className='text-sm font-medium truncate group-hover:text-primary transition-colors'>
|
||||
{game.gameTitle}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-text/50">
|
||||
<span className="text-green-400 font-medium">{game.avgFps} FPS</span>
|
||||
<span>{game.benchmarkCount} runs</span>
|
||||
<div className='flex items-center gap-2 text-xs text-text/50'>
|
||||
<span className='text-green-400 font-medium'>
|
||||
{game.avgFps} FPS
|
||||
</span>
|
||||
<span>
|
||||
{
|
||||
game.benchmarkCount
|
||||
}{" "}
|
||||
runs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0" />
|
||||
<ArrowRightIcon className='h-3.5 w-3.5 text-text/20 group-hover:text-primary transition-colors shrink-0' />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
@@ -419,11 +530,13 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
|
||||
{/* Empty state */}
|
||||
{stats && !loading && !error && stats.totalBenchmarks === 0 && (
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-[10svw]">
|
||||
<div className="text-center py-16 text-text/40">
|
||||
<Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
|
||||
<div className='max-w-7xl mx-auto px-4 md:px-[10svw]'>
|
||||
<div className='text-center py-16 text-text/40'>
|
||||
<Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
|
||||
<p>No benchmark data yet for this device</p>
|
||||
<p className="text-sm mt-1">Data will appear as benchmarks are submitted</p>
|
||||
<p className='text-sm mt-1'>
|
||||
Data will appear as benchmarks are submitted
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -431,15 +544,25 @@ export function DeviceDetailClient({ device }: { device: DeviceInfo }) {
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: string }) {
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ElementType
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl border border-border bg-text/[0.03] min-w-[160px]">
|
||||
<div className="flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" />
|
||||
<div className='flex items-center gap-3 p-4 rounded-xl border border-border bg-text/3 min-w-40'>
|
||||
<div className='flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary'>
|
||||
<Icon className='h-4 w-4' />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-text/50">{label}</span>
|
||||
<span className="text-lg font-semibold tabular-nums">{value}</span>
|
||||
<div className='flex flex-col'>
|
||||
<span className='text-xs text-text/50'>{label}</span>
|
||||
<span className='text-lg font-semibold tabular-nums'>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
+66
-50
@@ -61,11 +61,11 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
|
||||
if (devices.length === 0) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 md:px-[10svw] py-8">
|
||||
<div className="text-center py-16 text-text/40">
|
||||
<Gamepad2Icon className="h-10 w-10 mx-auto mb-2" />
|
||||
<div className='max-w-7xl mx-auto px-4 md:px-[10svw] py-8'>
|
||||
<div className='text-center py-16 text-text/40'>
|
||||
<Gamepad2Icon className='h-10 w-10 mx-auto mb-2' />
|
||||
<p>No devices found</p>
|
||||
<p className="text-sm mt-1">
|
||||
<p className='text-sm mt-1'>
|
||||
Benchmark data will appear as devices are added
|
||||
</p>
|
||||
</div>
|
||||
@@ -74,17 +74,17 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col gap-8 pb-16">
|
||||
<section className='w-full flex flex-col gap-8 py-16'>
|
||||
{/* Hero Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">Devices</h1>
|
||||
<p className="text-sm text-text/60 mt-1">
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<h1 className='text-2xl sm:text-3xl font-bold'>Devices</h1>
|
||||
<p className='text-sm text-text/60 mt-1'>
|
||||
Browse benchmark data for handheld and console devices
|
||||
</p>
|
||||
</div>
|
||||
@@ -95,10 +95,10 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.05 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className='max-w-7xl mx-auto'>
|
||||
<div className='flex items-center gap-2'>
|
||||
{filterOptions.map((opt) => (
|
||||
<button
|
||||
key={opt.id}
|
||||
@@ -121,9 +121,9 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className='max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
|
||||
{filteredDevices.map((device, i) => (
|
||||
<motion.div
|
||||
key={device.slug}
|
||||
@@ -136,11 +136,11 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
>
|
||||
<Link
|
||||
href={`/devices/${device.slug}`}
|
||||
className="block rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group overflow-hidden"
|
||||
className='block rounded-xl border border-border bg-text/3 hover:border-primary/30 transition-colors group overflow-hidden'
|
||||
>
|
||||
{/* Image / Icon Header */}
|
||||
<div
|
||||
className="relative h-28 flex items-center justify-center"
|
||||
className='relative h-28 flex items-center justify-center'
|
||||
style={{
|
||||
background: `${getDeviceColor(device.colorIndex)}08`,
|
||||
}}
|
||||
@@ -150,14 +150,16 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
src={device.image}
|
||||
alt={device.name}
|
||||
fill
|
||||
className="object-contain p-4"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
||||
className='object-contain p-4'
|
||||
sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
|
||||
/>
|
||||
) : (
|
||||
<Gamepad2Icon
|
||||
className="h-12 w-12"
|
||||
className='h-12 w-12'
|
||||
style={{
|
||||
color: getDeviceColor(device.colorIndex),
|
||||
color: getDeviceColor(
|
||||
device.colorIndex,
|
||||
),
|
||||
opacity: 0.6,
|
||||
}}
|
||||
/>
|
||||
@@ -165,63 +167,77 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
</div>
|
||||
|
||||
{/* Card Body */}
|
||||
<div className="p-5">
|
||||
<div className='p-5'>
|
||||
{/* Name & Type */}
|
||||
<div className="flex items-start justify-between gap-2 mb-3">
|
||||
<div className='flex items-start justify-between gap-2 mb-3'>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
|
||||
<h2 className='text-lg font-semibold group-hover:text-primary transition-colors'>
|
||||
{device.name}
|
||||
</h2>
|
||||
<span
|
||||
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border capitalize mt-1 ${
|
||||
deviceTypeColor[device.deviceType] ||
|
||||
deviceTypeColor[
|
||||
device.deviceType
|
||||
] ||
|
||||
"text-text/50 bg-text/5 border-border"
|
||||
}`}
|
||||
>
|
||||
<Gamepad2Icon className="h-2.5 w-2.5" />
|
||||
{deviceTypeLabel[device.deviceType] || device.deviceType}
|
||||
<Gamepad2Icon className='h-2.5 w-2.5' />
|
||||
{deviceTypeLabel[
|
||||
device.deviceType
|
||||
] || device.deviceType}
|
||||
</span>
|
||||
</div>
|
||||
<ArrowRightIcon className="h-5 w-5 text-text/20 group-hover:text-primary transition-colors" />
|
||||
<ArrowRightIcon className='h-5 w-5 text-text/20 group-hover:text-primary transition-colors' />
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-4 gap-2 mt-4">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<DatabaseIcon className="h-3.5 w-3.5 text-primary mb-1" />
|
||||
<span className="text-base font-bold tabular-nums">
|
||||
<div className='grid grid-cols-4 gap-2 mt-4'>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<DatabaseIcon className='h-3.5 w-3.5 text-primary mb-1' />
|
||||
<span className='text-base font-bold tabular-nums'>
|
||||
{device.totalBenchmarks}
|
||||
</span>
|
||||
<span className="text-[9px] text-text/50">Benchmarks</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<TrendingUpIcon className="h-3.5 w-3.5 text-green-400 mb-1" />
|
||||
<span className="text-base font-bold tabular-nums">
|
||||
{device.avgFps !== null ? device.avgFps : "—"}
|
||||
<span className='text-[9px] text-text/50'>
|
||||
Benchmarks
|
||||
</span>
|
||||
<span className="text-[9px] text-text/50">Avg FPS</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<MonitorIcon className="h-3.5 w-3.5 text-accent mb-1" />
|
||||
<span className="text-base font-bold tabular-nums">
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<TrendingUpIcon className='h-3.5 w-3.5 text-green-400 mb-1' />
|
||||
<span className='text-base font-bold tabular-nums'>
|
||||
{device.avgFps !== null
|
||||
? device.avgFps
|
||||
: "—"}
|
||||
</span>
|
||||
<span className='text-[9px] text-text/50'>
|
||||
Avg FPS
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<MonitorIcon className='h-3.5 w-3.5 text-accent mb-1' />
|
||||
<span className='text-base font-bold tabular-nums'>
|
||||
{device.gameCount}
|
||||
</span>
|
||||
<span className="text-[9px] text-text/50">Games</span>
|
||||
<span className='text-[9px] text-text/50'>
|
||||
Games
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<CheckCircleIcon className="h-3.5 w-3.5 text-blue-400 mb-1" />
|
||||
<span className="text-base font-bold tabular-nums">
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<CheckCircleIcon className='h-3.5 w-3.5 text-blue-400 mb-1' />
|
||||
<span className='text-base font-bold tabular-nums'>
|
||||
{device.verifiedCount}
|
||||
</span>
|
||||
<span className="text-[9px] text-text/50">Verified</span>
|
||||
<span className='text-[9px] text-text/50'>
|
||||
Verified
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Best game */}
|
||||
{device.bestGame && (
|
||||
<div className="mt-3 pt-3 border-t border-border text-xs text-text/50">
|
||||
<div className='mt-3 pt-3 border-t border-border text-xs text-text/50'>
|
||||
Top:{" "}
|
||||
<span className="text-text/80 font-medium">
|
||||
<span className='text-text/80 font-medium'>
|
||||
{device.bestGame.title}
|
||||
</span>{" "}
|
||||
· {device.bestGame.fpsAvg} FPS
|
||||
@@ -234,8 +250,8 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
|
||||
</div>
|
||||
|
||||
{filteredDevices.length === 0 && devices.length > 0 && (
|
||||
<div className="text-center py-12 text-text/40">
|
||||
<Gamepad2Icon className="h-8 w-8 mx-auto mb-2" />
|
||||
<div className='text-center py-12 text-text/40'>
|
||||
<Gamepad2Icon className='h-8 w-8 mx-auto mb-2' />
|
||||
<p>No {activeFilter} devices found</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
+4
-5
@@ -7,11 +7,10 @@ export const routes = [
|
||||
title: "Search",
|
||||
href: "/search",
|
||||
},
|
||||
// TODO: Add back when games page is implemented
|
||||
// {
|
||||
// title: "Games",
|
||||
// href: "/games",
|
||||
// },
|
||||
{
|
||||
title: "Games",
|
||||
href: "/games",
|
||||
},
|
||||
// TODO: Add back when compare page is implemented
|
||||
// {
|
||||
// title: "Compare",
|
||||
|
||||
@@ -9,11 +9,14 @@ const authRoutes = [
|
||||
"/reset-password",
|
||||
]
|
||||
|
||||
const adminRoutes = ["/admin"]
|
||||
|
||||
export async function proxy(req: NextRequest) {
|
||||
const path = req.nextUrl.pathname
|
||||
const isAuthRoute = authRoutes.some((route) => path.startsWith(route))
|
||||
const isAdminRoute = adminRoutes.some((route) => path.startsWith(route))
|
||||
|
||||
if (!isAuthRoute) {
|
||||
if (!isAuthRoute && !isAdminRoute) {
|
||||
return NextResponse.next()
|
||||
}
|
||||
|
||||
@@ -33,6 +36,15 @@ export async function proxy(req: NextRequest) {
|
||||
headers: req.headers,
|
||||
})
|
||||
|
||||
// Admin routes: require an admin session
|
||||
if (isAdminRoute) {
|
||||
if (!session || session.user.role !== "admin") {
|
||||
return NextResponse.redirect(new URL("/", req.url))
|
||||
}
|
||||
return NextResponse.next()
|
||||
}
|
||||
|
||||
// Auth routes: redirect authenticated users away
|
||||
if (session) {
|
||||
return NextResponse.redirect(new URL("/", req.url))
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user