Build world campaigns rewards and recaps

resources/js/components/worlds/WorldRecapStatsGrid.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+function formatNumber(value) {
+  return new Intl.NumberFormat('en', { notation: value >= 1000 ? 'compact' : 'standard', maximumFractionDigits: 1 }).format(Number(value || 0))
+}
+
+export default function WorldRecapStatsGrid({ stats }) {
+  const items = Array.isArray(stats?.items) ? stats.items : []
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
+      <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">Key stats</h2>
+          <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">A compact snapshot of how the edition performed before it settled into the archive.</p>
+        </div>
+        {stats?.captured_at ? <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{stats.source === 'snapshot' ? 'Snapshot captured' : 'Live draft metrics'} {new Date(stats.captured_at).toLocaleDateString()}</div> : null}
+      </div>
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+        {items.map((item) => (
+          <div key={item.key} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.label}</div>
+            <div className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{formatNumber(item.value)}</div>
+            {item.description ? <p className="mt-3 text-sm leading-6 text-slate-400">{item.description}</p> : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}