feat: display wattHours and tdpMax on device cards
This commit is contained in:
@@ -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'>
|
||||||
|
|||||||
Reference in New Issue
Block a user