83 lines
4.1 KiB
JavaScript
83 lines
4.1 KiB
JavaScript
import React from 'react'
|
|
import GroupBadgePill from './GroupBadgePill'
|
|
import { cx, formatCompactNumber } from './groupStyles'
|
|
|
|
export default function GroupDiscoveryCard({ group, className = '', compact = false }) {
|
|
if (!group) return null
|
|
|
|
const primarySummary = group.headline || group.bio_excerpt || 'Collaborative publishing identity on Skinbase.'
|
|
|
|
return (
|
|
<a
|
|
href={group.urls?.public || '/groups'}
|
|
className={cx(
|
|
'group block overflow-hidden rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.92))] p-5 shadow-[0_24px_70px_rgba(2,6,23,0.34)] transition duration-200 hover:-translate-y-1 hover:border-white/20',
|
|
className,
|
|
)}
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="flex h-14 w-14 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="" 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="flex flex-wrap items-center gap-2">
|
|
<h3 className="truncate text-lg font-semibold text-white">{group.name}</h3>
|
|
{group.is_recruiting ? <GroupBadgePill label="Recruiting" tone="emerald" /> : null}
|
|
{group.is_verified ? <GroupBadgePill label="Verified" tone="sky" /> : null}
|
|
</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">{primarySummary}</p>
|
|
{group.owner?.username || group.owner?.name ? (
|
|
<p className="mt-2 text-xs uppercase tracking-[0.16em] text-slate-500">
|
|
Led by {group.owner?.username || group.owner?.name}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
{(Array.isArray(group.trust_signals) ? group.trust_signals : []).slice(0, compact ? 2 : 3).map((signal) => (
|
|
<GroupBadgePill key={signal.key} label={signal.label} tone={signal.tone} />
|
|
))}
|
|
{(Array.isArray(group.badges) ? group.badges : []).slice(0, compact ? 1 : 2).map((badge) => (
|
|
<GroupBadgePill key={badge.key} label={badge.label} tone="amber" />
|
|
))}
|
|
</div>
|
|
|
|
{group.recruitment_headline && !compact ? (
|
|
<div className="mt-5 rounded-2xl border border-emerald-300/20 bg-emerald-400/10 px-4 py-3 text-sm text-emerald-50">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-200/80">Open call</div>
|
|
<div className="mt-1">{group.recruitment_headline}</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{group.featured_release?.title && !compact ? (
|
|
<div className="mt-5 rounded-2xl border border-white/10 bg-black/20 p-4">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100/80">Featured release</div>
|
|
<div className="mt-2 text-base font-semibold text-white">{group.featured_release.title}</div>
|
|
{group.featured_release.summary ? <div className="mt-1 text-sm text-slate-400">{group.featured_release.summary}</div> : null}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-5 grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-white/[0.03] p-3 text-center">
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.artworks)}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Artworks</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.members)}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Members</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-lg font-semibold text-white">{formatCompactNumber(group.counts?.followers)}</div>
|
|
<div className="text-[11px] uppercase tracking-[0.16em] text-slate-500">Followers</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|