52 lines
3.2 KiB
JavaScript
52 lines
3.2 KiB
JavaScript
import React from 'react'
|
|
import GroupBadgePill from './GroupBadgePill'
|
|
|
|
export default function GroupProfileSummary({ contributions = [], href = null }) {
|
|
if (!Array.isArray(contributions) || contributions.length === 0) return null
|
|
|
|
const featured = contributions.slice(0, 3)
|
|
|
|
return (
|
|
<section className="mx-auto mt-8 max-w-6xl px-4 sm:px-6 lg:px-8">
|
|
<div className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.12),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-5 shadow-[0_18px_55px_rgba(2,6,23,0.28)] backdrop-blur-xl sm:p-6">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Group footprint</div>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Collaborative work across public groups</h2>
|
|
<p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">See the groups this creator contributes to through releases, credited artworks, and shared publishing activity.</p>
|
|
</div>
|
|
{href ? <a href={href} className="text-sm font-semibold text-sky-200 transition hover:text-white">View full contribution history</a> : null}
|
|
</div>
|
|
|
|
<div className="mt-5 grid gap-4 lg:grid-cols-3">
|
|
{featured.map((entry) => (
|
|
<a key={entry.group?.slug || entry.group?.id} href={entry.group?.profile_url || '/groups'} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20 hover:bg-black/30">
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]">
|
|
{entry.group?.avatar_url ? <img src={entry.group.avatar_url} alt={entry.group?.name} className="h-full w-full object-cover" loading="lazy" /> : <i className="fa-solid fa-people-group text-slate-300" />}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-base font-semibold text-white">{entry.group?.name}</div>
|
|
{entry.role?.label ? <div className="mt-1 text-sm text-slate-400">{entry.role.label}</div> : null}
|
|
{entry.summary ? <div className="mt-2 text-sm text-slate-300">{entry.summary}</div> : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{entry.trusted ? <GroupBadgePill label="Trusted contributor" tone="sky" /> : null}
|
|
{entry.recent_release_titles?.length ? <GroupBadgePill label="Recent releases" tone="amber" /> : null}
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-4 text-xs text-slate-400">
|
|
<span>{Number(entry.counts?.artworks || 0).toLocaleString()} artworks</span>
|
|
<span>{Number(entry.counts?.releases || 0).toLocaleString()} releases</span>
|
|
<span>{Number(entry.counts?.projects || 0).toLocaleString()} projects</span>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|