From 2d6d3c04ce90600fbfaa7a30c44ff29e79e2c8b1 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 13 Oct 2025 18:42:06 +0200
Subject: [PATCH] Add stat box

---
 web/components/widgets/stat-box.tsx | 52 +++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 web/components/widgets/stat-box.tsx

diff --git a/web/components/widgets/stat-box.tsx b/web/components/widgets/stat-box.tsx
new file mode 100644
index 00000000..ddb31931
--- /dev/null
+++ b/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