server-dash/app/components/StatsGrid.tsx

48 lines
1.5 KiB
TypeScript

import { type Stats } from "../lib/getStats";
import StatCard from "./StatCard";
interface StatsGridProps {
stats: Stats | null;
}
export default function StatsGrid({ stats }: StatsGridProps) {
return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-3.5 mb-11">
<StatCard
label="CPU"
value={stats ? `${stats.cpu.percent.toFixed(1)}%` : "—"}
sub={stats?.cpu.model.replace(/\(R\)/g, "").replace(/\(TM\)/g, "").trim()}
percent={Number(stats?.cpu.percent.toFixed(1))}
delay={0}
/>
<StatCard
label="Memory"
value={stats ? `${(stats.memory.percent)}%` : "—"}
sub={stats ? `${(stats.memory.used / 1000).toFixed(1)} GB / ${(stats.memory.total / 1000).toFixed(1)} GB` : ""}
percent={stats?.memory.percent}
delay={60}
/>
<StatCard
label="Disk"
value={stats ? `${stats.disk.percent}%` : "—"}
sub={stats ? `${(stats.disk.used / 1024).toFixed(1)} GB / ${(stats.disk.total / 1024).toFixed(0)} GB` : ""}
percent={stats?.disk.percent}
delay={120}
/>
<StatCard
label="Temperature"
value={stats?.temperature != null ? `${stats.temperature}°C` : "—"}
sub={
stats?.temperature != null
? stats.temperature > 80
? "Running hot"
: stats.temperature > 60
? "Warm"
: "Cool"
: ""
}
delay={180}
/>
</div>
);
}