init

components/stat-card.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+type StatCardProps = {
+  label: string;
+  value: ReactNode;
+  hint?: string;
+  highlight?: boolean;
+};
+
+export function StatCard({ label, value, hint, highlight }: StatCardProps) {
+  return (
+    <div
+      className={
+        highlight
+          ? "rounded-lg border border-l-2 border-muted/30 border-l-accent/70 bg-surface p-4"
+          : "rounded-lg border border-muted/40 bg-surface px-3 py-2.5"
+      }
+    >
+      <div className={highlight ? "text-xs font-medium uppercase tracking-widest text-fg/50" : "text-xs text-fg/55"}>
+        {label}
+      </div>
+      <div className={highlight ? "mt-1.5 text-2xl font-bold text-fg" : "mt-0.5 text-base font-semibold text-fg"}>{value}</div>
+      {hint ? <div className="mt-1 text-xs text-fg/50">{hint}</div> : null}
+    </div>
+  );
+}