Portal: full mock-driven surfaces, demonolithed components, backend-ready mocks (#6686)

frontend/shared/components/StatTile.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import "@shared/components/StatTile.css";
+
+export type StatTileTone = "default" | "success" | "warning" | "danger";
+
+export interface StatTileProps {
+  label: ReactNode;
+  value: ReactNode;
+  /** Colours the value (e.g. error rate over threshold). */
+  tone?: StatTileTone;
+  className?: string;
+}
+
+/**
+ * Compact label-over-value stat used inside detail panels, cards, and metric
+ * grids (the small sibling of {@link MetricCard}). Value uses tabular figures
+ * so columns of stats stay aligned.
+ */
+export function StatTile({
+  label,
+  value,
+  tone = "default",
+  className,
+}: StatTileProps) {
+  return (
+    <div className={["sui-stat", className ?? ""].filter(Boolean).join(" ")}>
+      <span className="sui-stat__label">{label}</span>
+      <span
+        className={
+          "sui-stat__value" +
+          (tone !== "default" ? ` sui-stat__value--${tone}` : "")
+        }
+      >
+        {value}
+      </span>
+    </div>
+  );
+}