first commit

frontend/src/components/realtime/LiveStatusBoard.tsx

@@ -0,0 +1,30 @@
+import { Badge } from "../common/Badge";
+import { Card } from "../common/Card";
+import { formatValue } from "../../lib/format";
+import type { MetricValue } from "../../types";
+
+interface LiveStatusBoardProps {
+  status: MetricValue[];
+}
+
+export function LiveStatusBoard({ status }: LiveStatusBoardProps) {
+  if (!status.length) {
+    return null;
+  }
+
+  return (
+    <Card title="Stan systemu" subtitle="Temperatura falownika i kontrola swiezosci odczytu">
+      <div className="grid gap-3 sm:grid-cols-2">
+        {status.map((metric) => (
+          <div key={metric.metric_id} className="rounded-2xl border border-white/10 bg-slate-950/30 p-4">
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <div className="text-sm font-medium text-white">{metric.label}</div>
+              <Badge tone={metric.status}>{metric.status}</Badge>
+            </div>
+            <div className="text-sm text-slate-300">{formatValue(metric.value, metric.unit, metric.precision)}</div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}