49 lines
3.2 KiB
JavaScript
49 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import GroupBadgePill from './GroupBadgePill'
|
|
|
|
export default function GroupSummaryPanel({ group, artwork }) {
|
|
if (!group) return null
|
|
|
|
return (
|
|
<section className="overflow-hidden rounded-[28px] border border-white/[0.08] bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_36%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02))] px-5 py-5 shadow-[0_22px_55px_rgba(0,0,0,0.26)] backdrop-blur-xl sm:px-6">
|
|
<div className="flex items-start gap-4">
|
|
<a href={group.urls?.public || '/groups'} className="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
|
|
{group.avatar_url ? <img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
|
|
</a>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Published as a group</div>
|
|
<a href={group.urls?.public || '/groups'} className="mt-2 block text-xl font-semibold tracking-[-0.02em] text-white transition hover:text-sky-300">{group.name}</a>
|
|
<p className="mt-2 text-sm leading-6 text-white/65">{group.headline || group.bio_excerpt || `${artwork?.title || 'This artwork'} is credited to a collaborative group identity on Skinbase.`}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, 3).map((signal) => (
|
|
<GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
|
|
))}
|
|
{group.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
|
|
</div>
|
|
|
|
<div className="mt-5 grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-black/20 p-3 text-center">
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{Number(group.counts?.artworks || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Artworks</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{Number(group.counts?.members || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Members</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{Number(group.counts?.followers || 0).toLocaleString()}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Followers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
<a href={group.urls?.public || '/groups'} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">Open group page</a>
|
|
{group.urls?.releases ? <a href={group.urls.releases} className="rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.07]">Browse releases</a> : null}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|