🎨 style: establish console design system

2026-09-13 10:49:21 +00:00 · 2026-08-13 02:19:26 +07:00
parent 5e88c660dc
commit 3a09f0b571
26 changed files with 840 additions and 269 deletions
@@ -0,0 +1,47 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+export type StatItem = {
+  label: string;
+  value: number | string;
+  icon?: LucideIcon;
+  tone?: "default" | "positive" | "warning";
+};
+
+export function StatStrip({
+  items,
+  className,
+}: {
+  items: readonly StatItem[];
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid divide-x divide-border border bg-card shadow-[2px_2px_0_color-mix(in_oklch,var(--foreground)_8%,transparent)]",
+        className
+      )}
+      style={{ gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }}
+    >
+      {items.map(({ label, value, icon: Icon, tone = "default" }) => (
+        <div key={label} className="min-w-20 px-3 py-2.5 sm:min-w-28 sm:px-4">
+          <div className="mb-1.5 flex items-center gap-1.5 text-muted-foreground">
+            {Icon && (
+              <Icon
+                className={cn(
+                  "size-3.5",
+                  tone === "positive" && "text-success",
+                  tone === "warning" && "text-warning"
+                )}
+              />
+            )}
+            <span className="truncate font-mono text-[9px] font-bold uppercase tracking-[0.12em]">
+              {label}
+            </span>
+          </div>
+          <strong className="block text-xl leading-none tabular-nums sm:text-2xl">{value}</strong>
+        </div>
+      ))}
+    </div>
+  );
+}