Add stat box

web/components/widgets/stat-box.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { Card } from './card'
+import { ReactNode } from 'react'
+
+export type StatBoxProps = {
+  // The main numeric/stat value to display large and centered
+  value: string | number
+  // The short label/caption shown below the value
+  label?: ReactNode
+  // Optional additional content (e.g., sublabel) shown below the label
+  children?: ReactNode
+  // Additional classes for the outer Card wrapper
+  className?: string
+  // Control the size of the number (default: xl)
+  size?: 'lg' | 'xl' | '2xl' | '3xl'
+}
+
+/**
+ * A box component that displays a large number in the center with a few words below it.
+ * It composes the shared Card style for visual consistency.
+ */
+export function StatBox(props: StatBoxProps) {
+  const { value, label, children, className, size = '2xl' } = props
+
+  const sizeClass =
+    size === '3xl'
+      ? 'text-6xl'
+      : size === '2xl'
+      ? 'text-5xl'
+      : size === 'xl'
+      ? 'text-4xl'
+      : 'text-3xl'
+
+  return (
+    <Card
+      className={clsx(
+        'flex h-full w-full flex-col items-center justify-center gap-2 p-6 text-center',
+        className
+      )}
+    >
+      <div className={clsx('font-semibold leading-none tracking-tight', sizeClass)}>
+        {value}
+      </div>
+      {label && (
+        <div className="text-ink-700 text-sm">{label}</div>
+      )}
+      {children}
+    </Card>
+  )
+}
+
+export default StatBox