From 6f2899b77d37ee249d2116e19a7d941fcc32112e Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sun, 26 Apr 2026 11:23:24 -0500
Subject: [PATCH] feat: add devices grid page with device cards

---
 app/devices/page-client.tsx | 167 ++++++++++++++++++++++++++++++++++++
 app/devices/page.tsx        |  10 +++
 2 files changed, 177 insertions(+)
 create mode 100644 app/devices/page-client.tsx
 create mode 100644 app/devices/page.tsx

diff --git a/app/devices/page-client.tsx b/app/devices/page-client.tsx
new file mode 100644
index 0000000..039aea0
--- /dev/null
+++ b/app/devices/page-client.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { motion } from "motion/react"
+import { Gamepad2Icon, TrendingUpIcon, DatabaseIcon, ArrowRightIcon, Loader2 } from "lucide-react"
+
+interface DeviceStats {
+  slug: string
+  name: string
+  deviceType: string
+  sortOrder: number
+  totalBenchmarks: number
+  avgFps: number | null
+  gameCount: number
+  verifiedCount: number
+  bestGame: {
+    id: string
+    title: string
+    headerImage: string | null
+    fpsAvg: number
+  } | null
+}
+
+const deviceTypeLabel: Record<string, string> = {
+  handheld: "Handheld",
+  console: "Console",
+}
+
+export function DevicesPageClient() {
+  const [devices, setDevices] = useState<DeviceStats[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchDevices() {
+      try {
+        const res = await fetch("/api/hardware/stats")
+        if (!res.ok) throw new Error(`HTTP ${res.status}`)
+        const data = await res.json()
+        setDevices(data)
+      } catch (err) {
+        setError("Failed to load devices")
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchDevices()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[50vh]">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    )
+  }
+
+  if (error) {
+    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" />
+          <p>{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  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" />
+          <p>No devices found</p>
+          <p className="text-sm mt-1">Benchmark data will appear as devices are added</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <section className="w-full flex flex-col gap-8 pb-16">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        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">
+            Browse benchmark data for handheld and console devices
+          </p>
+        </div>
+      </motion.div>
+
+      {/* Device Grid */}
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.1 }}
+        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">
+          {devices.map((device, i) => (
+            <motion.div
+              key={device.slug}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: 0.05 * i }}
+            >
+              <Link
+                href={`/devices/${device.slug}`}
+                className="block p-5 rounded-xl border border-border bg-text/[0.03] hover:border-primary/30 transition-colors group"
+              >
+                {/* Header */}
+                <div className="flex items-start justify-between gap-2 mb-3">
+                  <div>
+                    <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 bg-secondary/20 text-secondary border border-secondary/30 capitalize mt-1">
+                      <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" />
+                </div>
+
+                {/* Stats */}
+                <div className="grid grid-cols-3 gap-3 mt-4">
+                  <div className="flex flex-col items-center text-center">
+                    <DatabaseIcon className="h-4 w-4 text-primary mb-1" />
+                    <span className="text-lg font-bold tabular-nums">{device.totalBenchmarks}</span>
+                    <span className="text-[10px] text-text/50">Benchmarks</span>
+                  </div>
+                  <div className="flex flex-col items-center text-center">
+                    <TrendingUpIcon className="h-4 w-4 text-green-400 mb-1" />
+                    <span className="text-lg font-bold tabular-nums">
+                      {device.avgFps !== null ? device.avgFps : "—"}
+                    </span>
+                    <span className="text-[10px] text-text/50">Avg FPS</span>
+                  </div>
+                  <div className="flex flex-col items-center text-center">
+                    <Gamepad2Icon className="h-4 w-4 text-accent mb-1" />
+                    <span className="text-lg font-bold tabular-nums">{device.gameCount}</span>
+                    <span className="text-[10px] text-text/50">Games</span>
+                  </div>
+                </div>
+
+                {/* Best game */}
+                {device.bestGame && (
+                  <div className="mt-3 pt-3 border-t border-border text-xs text-text/50">
+                    Top: <span className="text-text/80 font-medium">{device.bestGame.title}</span> · {device.bestGame.fpsAvg} FPS
+                  </div>
+                )}
+              </Link>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  )
+}
diff --git a/app/devices/page.tsx b/app/devices/page.tsx
new file mode 100644
index 0000000..f99b99c
--- /dev/null
+++ b/app/devices/page.tsx
@@ -0,0 +1,10 @@
+import { DevicesPageClient } from "./page-client"
+
+export const metadata = {
+  title: "Devices — DeckyVault",
+  description: "Browse handheld and console devices with benchmark data on DeckyVault",
+}
+
+export default function DevicesPage() {
+  return <DevicesPageClient />
+}