44 lines
2.0 KiB
JavaScript
44 lines
2.0 KiB
JavaScript
import React from 'react'
|
|
import GroupBadgePill from './GroupBadgePill'
|
|
|
|
export default function GroupLeaderboardCard({ item }) {
|
|
if (!item?.entity) return null
|
|
|
|
const entity = item.entity
|
|
|
|
return (
|
|
<article className="rounded-[26px] border border-white/10 bg-white/[0.03] p-4 shadow-[0_18px_50px_rgba(2,6,23,0.3)]">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-slate-950/70 text-lg font-black text-white">
|
|
#{item.rank}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<a href={entity.url || '/groups'} className="block truncate text-lg font-semibold text-white transition hover:text-sky-300">{entity.name}</a>
|
|
{entity.headline ? <p className="mt-1 text-sm text-slate-400">{entity.headline}</p> : null}
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Score</div>
|
|
<div className="mt-1 text-xl font-black text-white">{Number(item.score || 0).toLocaleString()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{(Array.isArray(entity.trust_signals) ? entity.trust_signals : []).slice(0, 2).map((signal) => (
|
|
<GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
|
|
))}
|
|
{entity.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-4 text-xs text-slate-400">
|
|
<span>{Number(entity.artworks_count || 0).toLocaleString()} artworks</span>
|
|
<span>{Number(entity.members_count || 0).toLocaleString()} members</span>
|
|
<span>{Number(entity.followers_count || 0).toLocaleString()} followers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|