35 lines
1.7 KiB
JavaScript
35 lines
1.7 KiB
JavaScript
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>
|
|
)
|
|
}
|