klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Commit workspace changes

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-05 19:42:33 +02:00
parent 148a3bbe43
commit 08ad757bcb
312 changed files with 35149 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/components/groups/GroupPromoCard.jsx Normal file
View File

@@ -0,0 +1,66 @@
import React from 'react'
import GroupBadgePill from './GroupBadgePill'
export default function GroupPromoCard({ group, eyebrow = 'Groups spotlight', title, description, ctaLabel = 'Open group' }) {
if (!group) return null
return (
<section className="overflow-hidden rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.18),transparent_28%),radial-gradient(circle_at_80%_20%,rgba(16,185,129,0.12),transparent_26%),linear-gradient(180deg,rgba(7,16,29,0.98),rgba(2,6,23,0.94))] shadow-[0_30px_90px_rgba(2,6,23,0.45)]">
<div className="grid gap-6 p-6 lg:grid-cols-[minmax(0,1.3fr)_320px] lg:p-8">
<div>
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/80">{eyebrow}</p>
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">{title || group.name}</h2>
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300">{description || group.headline || group.bio_excerpt || 'Collective publishing for shared releases, artwork credits, and collaborative identity.'}</p>
<div className="mt-5 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="Actively recruiting" tone="emerald" /> : null}
</div>
<div className="mt-6 flex flex-wrap gap-3">
<a href={group.urls?.public || '/groups'} className="inline-flex items-center gap-2 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/40 hover:bg-sky-300/15">
{ctaLabel}
<i className="fa-solid fa-arrow-right text-xs" />
</a>
<a href="/groups" className="inline-flex items-center gap-2 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 all groups
</a>
</div>
</div>
<div className="rounded-[28px] border border-white/10 bg-black/25 p-5 backdrop-blur-sm">
<div className="flex items-center gap-4">
<div 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" />}
</div>
<div className="min-w-0">
<div className="truncate text-lg font-semibold text-white">{group.name}</div>
<div className="mt-1 text-sm text-slate-400">{group.owner?.username || group.owner?.name ? `Led by ${group.owner.username || group.owner.name}` : 'Shared publishing identity'}</div>
</div>
</div>
<div className="mt-5 grid grid-cols-2 gap-3">
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
<div className="text-2xl font-semibold text-white">{Number(group.counts?.artworks || 0).toLocaleString()}</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Published artworks</div>
</div>
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
<div className="text-2xl font-semibold text-white">{Number(group.counts?.followers || 0).toLocaleString()}</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Followers</div>
</div>
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
<div className="text-2xl font-semibold text-white">{Number(group.counts?.members || 0).toLocaleString()}</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Members</div>
</div>
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
<div className="text-2xl font-semibold text-white">{Number(group.counts?.collections || 0).toLocaleString()}</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-slate-500">Collections</div>
</div>
</div>
</div>
</div>
</section>
)
}