58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
|
|
const TONE_STYLES = {
|
|
sky: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
|
|
amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
|
|
emerald: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
|
|
violet: 'border-violet-300/20 bg-violet-400/10 text-violet-100',
|
|
}
|
|
|
|
function StatCard({ icon, label, value, tone, hint }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-4 shadow-[0_18px_42px_rgba(2,6,23,0.18)]">
|
|
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${TONE_STYLES[tone] || TONE_STYLES.sky}`}>
|
|
<i className={`fa-solid ${icon} text-sm`} />
|
|
</div>
|
|
<div className="mt-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{label}</div>
|
|
<div className="mt-1 text-2xl font-bold tracking-tight text-white">{value}</div>
|
|
{hint ? <div className="mt-2 text-xs leading-relaxed text-slate-400">{hint}</div> : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ProfileWorldStatsRow({ summary }) {
|
|
const worldAppearances = summary?.world_appearances || summary?.worlds_joined || 0
|
|
|
|
return (
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
|
<StatCard
|
|
icon="fa-globe"
|
|
label="World Appearances"
|
|
value={worldAppearances}
|
|
tone="sky"
|
|
hint={summary?.active_year_span?.label ? `Active across ${summary.active_year_span.label}` : 'Edition-aware creator history'}
|
|
/>
|
|
<StatCard
|
|
icon="fa-stars"
|
|
label="Featured"
|
|
value={summary?.featured_appearances || 0}
|
|
tone="amber"
|
|
hint="Editorial features and highlighted placements"
|
|
/>
|
|
<StatCard
|
|
icon="fa-trophy"
|
|
label="Wins / Finalists"
|
|
value={summary?.finalist_winner_appearances || 0}
|
|
tone="emerald"
|
|
hint="Higher-tier placements tied to world-linked challenges"
|
|
/>
|
|
<StatCard
|
|
icon="fa-bolt"
|
|
label="Spotlights"
|
|
value={summary?.spotlight_appearances || 0}
|
|
tone="violet"
|
|
hint="Editorial spotlight moments across editions"
|
|
/>
|
|
</div>
|
|
)
|
|
} |