feat: display wattHours and tdpMax on device cards

This commit is contained in:
2026-05-09 23:27:37 +08:00
parent bb45599fe9
commit ff360c6ab4
+22
View File
@@ -11,6 +11,8 @@ import {
ArrowRightIcon, ArrowRightIcon,
MonitorIcon, MonitorIcon,
CheckCircleIcon, CheckCircleIcon,
Zap,
Gauge,
} from "lucide-react" } from "lucide-react"
import { getDeviceColor } from "@/components/charts/EChartWrapper" import { getDeviceColor } from "@/components/charts/EChartWrapper"
@@ -31,6 +33,8 @@ export interface DeviceStats {
headerImage: string | null headerImage: string | null
fpsAvg: number fpsAvg: number
} | null } | null
wattHours: number | null
tdpMax: number | null
} }
const deviceTypeLabel: Record<string, string> = { const deviceTypeLabel: Record<string, string> = {
@@ -233,6 +237,24 @@ export function DevicesPageClient({ devices }: { devices: DeviceStats[] }) {
</div> </div>
</div> </div>
{/* Power specs */}
{(device.wattHours || device.tdpMax) && (
<div className="flex items-center gap-3 mt-3 text-xs text-text/40">
{device.wattHours && (
<span className="inline-flex items-center gap-1">
<Zap className="h-3 w-3" />
{Math.round(device.wattHours)}Wh
</span>
)}
{device.tdpMax && (
<span className="inline-flex items-center gap-1">
<Gauge className="h-3 w-3" />
Up to {Math.round(device.tdpMax)}W TDP
</span>
)}
</div>
)}
{/* Best game */} {/* Best game */}
{device.bestGame && ( {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'>