all

apps/web/src/app/admin/_components/stat-card.tsx

@@ -0,0 +1,23 @@
+import { Icon, type IconifyIcon } from "@iconify/react";
+
+interface StatCardProps {
+  icon: IconifyIcon;
+  label: string;
+  value: string;
+  hint: string;
+}
+
+export function StatCard({ icon, label, value, hint }: StatCardProps) {
+  return (
+    <div className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-5">
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-muted">{label}</span>
+        <span className="flex size-9 items-center justify-center rounded-lg bg-accent-soft">
+          <Icon icon={icon} width={18} height={18} className="text-accent-soft-foreground" aria-hidden="true" />
+        </span>
+      </div>
+      <p className="text-3xl font-semibold tabular-nums text-foreground">{value}</p>
+      <p className="text-xs text-muted">{hint}</p>
+    </div>
+  );
+}