24 lines
1.3 KiB
React
24 lines
1.3 KiB
React
import React from "react";
|
|
|
|
/**
|
|
* Dashboard metric. Big mono value, label, optional delta + icon.
|
|
*/
|
|
export function Stat({ label, value, unit, delta = null, deltaTone = "neutral", icon = null, style = {} }) {
|
|
const dc = { up: "var(--status-ok)", down: "var(--status-error)", neutral: "var(--text-secondary)" };
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "8px", ...style }}>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "7px" }}>
|
|
{icon && <span style={{ display: "inline-flex", color: "var(--text-disabled)" }}>{icon}</span>}
|
|
<span style={{ font: "var(--weight-medium) var(--text-xs)/1 var(--font-sans)", letterSpacing: "0.03em", color: "var(--text-secondary)" }}>{label}</span>
|
|
</div>
|
|
<div style={{ display: "flex", alignItems: "baseline", gap: "6px" }}>
|
|
<span style={{ font: "var(--weight-semibold) var(--text-2xl)/1 var(--font-mono)", color: "var(--text-primary)", letterSpacing: "-0.01em", fontVariantNumeric: "tabular-nums" }}>{value}</span>
|
|
{unit && <span style={{ font: "var(--text-sm)/1 var(--font-sans)", color: "var(--text-disabled)" }}>{unit}</span>}
|
|
{delta != null && (
|
|
<span style={{ marginLeft: 2, font: "var(--weight-medium) var(--text-xs)/1 var(--font-mono)", color: dc[deltaTone] }}>{delta}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|