987 lines
54 KiB
JavaScript
987 lines
54 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { router, usePage } from '@inertiajs/react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
import useWebShare from '../../hooks/useWebShare'
|
|
|
|
function normalizeText(value) {
|
|
return String(value || '').trim().toLowerCase()
|
|
}
|
|
|
|
function formatCompactNumber(value) {
|
|
return Number(value ?? 0).toLocaleString()
|
|
}
|
|
|
|
function formatDateLabel(value) {
|
|
if (!value) return null
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return null
|
|
|
|
return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
|
}
|
|
|
|
function websiteLabel(url) {
|
|
if (!url) return null
|
|
|
|
try {
|
|
const parsed = new URL(url.startsWith('http') ? url : `https://${url}`)
|
|
return parsed.hostname
|
|
} catch {
|
|
return String(url).replace(/^https?:\/\//, '')
|
|
}
|
|
}
|
|
|
|
const SECTION_TABS = [
|
|
{ id: 'overview', label: 'Overview', icon: 'fa-compass' },
|
|
{ id: 'artworks', label: 'Artworks', icon: 'fa-images' },
|
|
{ id: 'collections', label: 'Collections', icon: 'fa-layer-group' },
|
|
{ id: 'posts', label: 'Posts', icon: 'fa-newspaper' },
|
|
{ id: 'projects', label: 'Projects', icon: 'fa-diagram-project' },
|
|
{ id: 'releases', label: 'Releases', icon: 'fa-rocket' },
|
|
{ id: 'challenges', label: 'Challenges', icon: 'fa-trophy' },
|
|
{ id: 'events', label: 'Events', icon: 'fa-calendar-days' },
|
|
{ id: 'activity', label: 'Activity', icon: 'fa-bolt' },
|
|
{ id: 'members', label: 'Members', icon: 'fa-users' },
|
|
{ id: 'about', label: 'About', icon: 'fa-id-card' },
|
|
]
|
|
|
|
function sectionHref(baseUrl, tab) {
|
|
return tab === 'overview' ? baseUrl : `${baseUrl}/${tab}`
|
|
}
|
|
|
|
function GroupTabs({ baseUrl, activeSection }) {
|
|
return (
|
|
<div className="sticky top-0 z-30 border-b border-white/10 bg-[#08111f]/80 backdrop-blur-2xl">
|
|
<nav className="overflow-x-auto scrollbar-hide" aria-label="Group sections">
|
|
<div className="mx-auto flex w-max min-w-full gap-2 px-3 py-3 justify-center xl:items-stretch">
|
|
{SECTION_TABS.map((tab) => {
|
|
const isActive = activeSection === tab.id
|
|
|
|
return (
|
|
<a
|
|
key={tab.id}
|
|
href={sectionHref(baseUrl, tab.id)}
|
|
className={`group relative flex items-center gap-2.5 rounded-2xl border px-3.5 py-3 text-sm font-medium whitespace-nowrap outline-none transition-all duration-150 ${isActive
|
|
? 'border-sky-300/25 bg-gradient-to-br from-sky-400/18 via-white/[0.06] to-cyan-400/10 text-white shadow-[0_16px_32px_rgba(14,165,233,0.12)]'
|
|
: 'border-white/8 bg-white/[0.03] text-slate-400 hover:border-white/15 hover:bg-white/[0.05] hover:text-slate-100'
|
|
}`}
|
|
>
|
|
<span className={`inline-flex h-9 w-9 items-center justify-center rounded-xl border text-sm ${isActive ? 'border-sky-300/20 bg-sky-400/10 text-sky-200' : 'border-white/10 bg-white/[0.04] text-slate-500 group-hover:text-slate-300'}`}>
|
|
<i className={`fa-solid ${tab.icon} fa-fw`} />
|
|
</span>
|
|
{tab.label}
|
|
{isActive ? <span className="absolute inset-x-4 bottom-0 h-0.5 rounded-full bg-sky-300 shadow-[0_0_10px_rgba(125,211,252,0.8)]" aria-hidden="true" /> : null}
|
|
</a>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function GroupHero({
|
|
group,
|
|
recruitment,
|
|
trustSignals,
|
|
following,
|
|
followersCount,
|
|
currentJoinRequest,
|
|
shareLabel,
|
|
onToggleFollow,
|
|
onJoinRequest,
|
|
onWithdrawJoinRequest,
|
|
onShare,
|
|
onReport,
|
|
reportEndpoint,
|
|
}) {
|
|
const activeSignals = Array.isArray(trustSignals) ? trustSignals.slice(0, 3) : []
|
|
const joinDate = formatDateLabel(group.founded_at || group.created_at)
|
|
const heroStats = [
|
|
{ label: 'Followers', value: formatCompactNumber(followersCount) },
|
|
{ label: 'Members', value: formatCompactNumber(group.counts?.members) },
|
|
{ label: 'Artworks', value: formatCompactNumber(group.counts?.artworks) },
|
|
{ label: 'Collections', value: formatCompactNumber(group.counts?.collections) },
|
|
]
|
|
|
|
return (
|
|
<div className="relative mx-auto max-w-7xl px-4 pt-4 md:pt-6">
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-x-10 top-8 -z-10 h-44 rounded-full blur-3xl"
|
|
style={{
|
|
background: 'linear-gradient(90deg, rgba(56,189,248,0.18), rgba(16,185,129,0.14), rgba(59,130,246,0.12))',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative overflow-hidden rounded-[32px] border border-white/10 bg-[#09111f]/80 shadow-[0_24px_80px_rgba(2,6,23,0.55)]">
|
|
<div
|
|
className="w-full h-[208px] md:h-[248px] xl:h-[288px]"
|
|
style={{
|
|
background: group.banner_url
|
|
? `url('${group.banner_url}') center center / cover no-repeat`
|
|
: 'linear-gradient(140deg, #07101d 0%, #0b1726 42%, #07111e 100%)',
|
|
position: 'relative',
|
|
}}
|
|
>
|
|
<div className="absolute left-4 top-4 z-20 flex flex-wrap items-center gap-2 md:left-6 md:top-6">
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-black/30 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-200 backdrop-blur-md">
|
|
<span className="h-2 w-2 rounded-full bg-sky-400 shadow-[0_0_12px_rgba(56,189,248,0.9)]" />
|
|
Group profile
|
|
</span>
|
|
{group.is_verified ? (
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100 backdrop-blur-md">
|
|
<i className="fa-solid fa-badge-check text-[10px]" />
|
|
Verified
|
|
</span>
|
|
) : null}
|
|
{recruitment?.is_recruiting ? (
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100 backdrop-blur-md">
|
|
<i className="fa-solid fa-user-plus text-[10px]" />
|
|
Recruiting
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: group.banner_url
|
|
? 'linear-gradient(180deg, rgba(2,6,23,0.16) 0%, rgba(2,6,23,0.28) 38%, rgba(2,6,23,0.9) 100%)'
|
|
: 'radial-gradient(ellipse at 16% 40%, rgba(77,163,255,.18) 0%, transparent 60%), radial-gradient(ellipse at 84% 22%, rgba(16,185,129,.14) 0%, transparent 54%)',
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '32px' }} />
|
|
</div>
|
|
|
|
<div className="relative px-4 pb-6 md:px-7 md:pb-7">
|
|
<div className="relative -mt-16 flex flex-col gap-5 md:-mt-20 md:flex-row md:items-start md:gap-6">
|
|
<div className="mx-auto z-10 shrink-0 md:mx-0">
|
|
<div className="flex h-[112px] w-[112px] items-center justify-center overflow-hidden rounded-[28px] border border-white/15 bg-[#0b1320] shadow-[0_0_0_8px_rgba(9,17,31,0.92),0_22px_44px_rgba(2,6,23,0.5)] md:h-[132px] md:w-[132px]">
|
|
{group.avatar_url ? (
|
|
<img src={group.avatar_url} alt={group.name} className="h-full w-full object-cover" />
|
|
) : (
|
|
<i className="fa-solid fa-people-group text-4xl text-slate-300" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1 text-center md:text-left">
|
|
<div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_430px] xl:items-start">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center justify-center gap-2 md:justify-start">
|
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">
|
|
<i className="fa-solid fa-stars text-[10px] text-sky-300" />
|
|
Publishing collective
|
|
</span>
|
|
{group.owner?.username || group.owner?.name ? (
|
|
<a href={group.owner?.profile_url || '#'} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300 transition hover:bg-white/[0.08] hover:text-white">
|
|
<i className="fa-solid fa-user-gear text-[10px] text-slate-400" />
|
|
Led by {group.owner?.username || group.owner?.name}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
<h1 className="mt-3 text-[30px] font-semibold leading-tight tracking-[-0.03em] text-white md:text-[42px]">
|
|
{group.name}
|
|
</h1>
|
|
<p className="mt-1 font-mono text-sm text-slate-400 md:text-[15px]">@{group.slug}</p>
|
|
|
|
<div className="mt-4 flex flex-wrap items-center justify-center gap-2 md:justify-start">
|
|
{group.visibility ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.visibility}</span> : null}
|
|
{group.status ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.status}</span> : null}
|
|
{group.type ? <span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">{group.type}</span> : null}
|
|
{joinDate ? (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">
|
|
<i className="fa-solid fa-calendar-days fa-fw text-slate-500" />
|
|
Since {joinDate}
|
|
</span>
|
|
) : null}
|
|
{group.website_url ? (
|
|
<a
|
|
href={group.website_url.startsWith('http') ? group.website_url : `https://${group.website_url}`}
|
|
target="_blank"
|
|
rel="nofollow noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1.5 text-xs text-sky-200 transition-colors hover:border-sky-300/35 hover:bg-sky-400/15"
|
|
>
|
|
<i className="fa-solid fa-link fa-fw" />
|
|
{websiteLabel(group.website_url)}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
|
|
{group.headline ? <p className="mx-auto mt-4 max-w-2xl text-sm leading-relaxed text-slate-300/90 md:mx-0 md:text-[15px]">{group.headline}</p> : null}
|
|
{group.bio ? <p className="mx-auto mt-3 max-w-3xl text-sm leading-relaxed text-slate-400 md:mx-0 line-clamp-3">{group.bio}</p> : null}
|
|
|
|
{activeSignals.length > 0 ? (
|
|
<div className="mt-4 flex flex-wrap items-center justify-center gap-2 md:justify-start">
|
|
{activeSignals.map((signal) => (
|
|
<span key={signal.key} className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-cyan-300" />
|
|
{signal.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="space-y-3 xl:pt-1">
|
|
<div className="flex flex-wrap items-center justify-center gap-2 xl:flex-nowrap xl:justify-end">
|
|
{group.urls?.studio ? (
|
|
<a
|
|
href={group.urls.studio}
|
|
className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-400 px-4 py-2.5 text-sm font-semibold text-slate-950 shadow-[0_18px_36px_rgba(14,165,233,0.28)] transition-transform hover:-translate-y-0.5"
|
|
>
|
|
<i className="fa-solid fa-wand-magic-sparkles fa-fw" />
|
|
Open Studio
|
|
</a>
|
|
) : null}
|
|
{group.urls?.follow ? (
|
|
<button
|
|
type="button"
|
|
onClick={onToggleFollow}
|
|
className={`inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border px-4 py-2.5 text-sm font-medium transition-all ${following ? 'border-emerald-400/40 bg-emerald-500/12 text-emerald-300 hover:bg-emerald-500/18' : 'border-sky-400/40 bg-sky-500/12 text-sky-200 hover:bg-sky-500/20'}`}
|
|
>
|
|
<i className={`fa-solid ${following ? 'fa-circle-check' : 'fa-user-plus'} fa-fw`} />
|
|
{following ? 'Following' : 'Follow group'}
|
|
</button>
|
|
) : null}
|
|
{group.permissions?.can_request_join ? (
|
|
<button
|
|
type="button"
|
|
onClick={onJoinRequest}
|
|
className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-emerald-300/25 bg-emerald-300/10 px-4 py-2.5 text-sm font-medium text-emerald-100 transition hover:bg-emerald-300/15"
|
|
>
|
|
<i className="fa-solid fa-door-open fa-fw" />
|
|
Request to join
|
|
</button>
|
|
) : null}
|
|
{currentJoinRequest?.status === 'pending' ? (
|
|
<button
|
|
type="button"
|
|
onClick={onWithdrawJoinRequest}
|
|
className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
|
|
>
|
|
<i className="fa-solid fa-xmark fa-fw" />
|
|
Withdraw request
|
|
</button>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={onShare}
|
|
className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
|
|
>
|
|
<i className="fa-solid fa-share-nodes fa-fw" />
|
|
{shareLabel}
|
|
</button>
|
|
{reportEndpoint ? (
|
|
<button
|
|
type="button"
|
|
onClick={onReport}
|
|
className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.08] hover:text-white"
|
|
>
|
|
<i className="fa-solid fa-flag fa-fw" />
|
|
Report
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="rounded-[24px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.72),rgba(9,17,31,0.92))] p-3 text-left shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{heroStats.map((fact) => (
|
|
<div key={fact.label} className="rounded-2xl border border-white/10 bg-white/[0.04] px-3 py-2.5">
|
|
<div className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">{fact.label}</div>
|
|
<div className="mt-1 text-sm font-semibold tracking-tight text-white md:text-[15px]">{fact.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-2.5 flex flex-wrap items-center gap-2">
|
|
{group.owner?.username || group.owner?.name ? (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
|
|
<i className="fa-solid fa-crown text-[10px] text-amber-300" />
|
|
Owner {group.owner?.username || group.owner?.name}
|
|
</span>
|
|
) : null}
|
|
{recruitment?.headline ? (
|
|
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-medium text-slate-300">
|
|
<i className="fa-solid fa-bullhorn text-[10px] text-sky-300" />
|
|
{recruitment.headline}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ArtworkGrid({ artworks, emptyLabel = 'No artworks yet.' }) {
|
|
if (!Array.isArray(artworks) || artworks.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
|
|
{artworks.map((artwork) => (
|
|
<a key={artwork.id} href={artwork.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20 transition hover:border-white/20">
|
|
{artwork.thumb ? <img src={artwork.thumb} alt={artwork.title} className="aspect-[4/3] w-full object-cover" /> : null}
|
|
<div className="p-4">
|
|
<h3 className="text-base font-semibold text-white">{artwork.title}</h3>
|
|
<p className="mt-1 text-sm text-slate-400">{artwork.author}</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CollectionGrid({ collections, emptyLabel = 'No collections yet.' }) {
|
|
if (!Array.isArray(collections) || collections.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2">
|
|
{collections.map((collection) => (
|
|
<a key={collection.id} href={collection.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-white">{collection.title}</h3>
|
|
<p className="mt-2 text-sm text-slate-300">{collection.summary || collection.description_excerpt || 'Collection'}</p>
|
|
</div>
|
|
{collection.is_featured ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">Featured</span> : null}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CompactCardGrid({ items, emptyLabel, badgeKey = 'status' }) {
|
|
if (!Array.isArray(items) || items.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{items.map((item) => (
|
|
<a key={item.id} href={item.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h3 className="text-base font-semibold text-white">{item.title}</h3>
|
|
{item[badgeKey] ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item[badgeKey]}</span> : null}
|
|
</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">{item.summary || 'Open for more details.'}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ReleaseGrid({ releases, emptyLabel = 'No public releases yet.' }) {
|
|
if (!Array.isArray(releases) || releases.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{releases.map((release) => (
|
|
<a key={release.id} href={release.url} className="overflow-hidden rounded-[24px] border border-white/10 bg-black/20 transition hover:border-white/20">
|
|
{release.cover_url ? <img src={release.cover_url} alt={release.title} className="aspect-[4/3] w-full object-cover" /> : <div className="flex aspect-[4/3] items-center justify-center bg-white/[0.03] text-slate-500"><i className="fa-solid fa-rocket text-2xl" /></div>}
|
|
<div className="p-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{release.status}</span>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{release.current_stage}</span>
|
|
</div>
|
|
<h3 className="mt-3 text-base font-semibold text-white">{release.title}</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">{release.summary || 'Release overview and linked artworks.'}</p>
|
|
<div className="mt-3 text-xs text-slate-500">{release.counts?.artworks || 0} artworks • {release.counts?.contributors || 0} contributors • {release.counts?.milestones || 0} milestones</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AssetGrid({ assets, emptyLabel = 'No public resources yet.' }) {
|
|
if (!Array.isArray(assets) || assets.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{assets.map((asset) => (
|
|
<a key={asset.id} href={asset.download_url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{asset.category}</div>
|
|
<h3 className="mt-2 text-base font-semibold text-white">{asset.title}</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">{asset.description || 'Download this shared group asset.'}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActivityFeed({ items, emptyLabel = 'No public activity yet.' }) {
|
|
if (!Array.isArray(items) || items.length === 0) {
|
|
return <p className="mt-5 text-sm text-slate-400">{emptyLabel}</p>
|
|
}
|
|
|
|
return (
|
|
<div className="mt-5 space-y-3">
|
|
{items.map((item) => (
|
|
<div key={item.id} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h3 className="text-base font-semibold text-white">{item.headline}</h3>
|
|
{item.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Pinned</span> : null}
|
|
</div>
|
|
{item.summary ? <p className="mt-2 text-sm leading-6 text-slate-300">{item.summary}</p> : null}
|
|
<div className="mt-2 text-xs text-slate-500">{item.actor?.name || item.actor?.username || 'System'} • {item.occurred_at ? new Date(item.occurred_at).toLocaleString() : 'Recently'}</div>
|
|
{item.subject?.url ? <a href={item.subject.url} className="mt-3 inline-flex text-sm font-semibold text-sky-200">Open</a> : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LeadershipPreview({ leadership }) {
|
|
if (!Array.isArray(leadership) || leadership.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Leadership</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Owner and admins</h2>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 grid gap-3 sm:grid-cols-2">
|
|
{leadership.map((member) => (
|
|
<a key={member.id} href={member.profile_url || '#'} className="flex items-center gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
|
|
{member.avatar_url ? <img src={member.avatar_url} alt={member.name || member.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
|
|
<div className="min-w-0">
|
|
<div className="truncate font-semibold text-white">{member.name || member.username}</div>
|
|
<div className="text-xs uppercase tracking-[0.16em] text-slate-400">{member.role_label || member.role}</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function FocusCard({ eyebrow, item, badgeKey = 'status', ctaLabel }) {
|
|
if (!item?.title) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">{eyebrow}</p>
|
|
<div className="mt-2 flex items-center gap-3">
|
|
<h2 className="text-2xl font-semibold text-white">{item.title}</h2>
|
|
{item[badgeKey] ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-300">{item[badgeKey]}</span> : null}
|
|
</div>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">{item.summary || 'Open for more details.'}</p>
|
|
<a href={item.url} className="mt-4 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">{ctaLabel}</a>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function TrustSignalPanel({ signals }) {
|
|
if (!Array.isArray(signals) || signals.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const toneClasses = {
|
|
sky: 'border-sky-300/20 bg-sky-300/10 text-sky-100',
|
|
emerald: 'border-emerald-300/20 bg-emerald-300/10 text-emerald-100',
|
|
amber: 'border-amber-300/20 bg-amber-300/10 text-amber-100',
|
|
violet: 'border-violet-300/20 bg-violet-300/10 text-violet-100',
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Trust signals</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">How this group shows up</h2>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
{signals.map((signal) => <span key={signal.key} className={`rounded-full border px-3 py-2 text-sm font-semibold ${toneClasses[signal.tone] || 'border-white/10 bg-white/[0.04] text-white'}`}>{signal.label}</span>)}
|
|
</div>
|
|
<div className="mt-5 space-y-3">
|
|
{signals.map((signal) => <div key={`${signal.key}-reason`} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4"><div className="font-semibold text-white">{signal.label}</div><p className="mt-2 text-sm leading-6 text-slate-400">{signal.reason}</p></div>)}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function BadgeShowcase({ badges }) {
|
|
if (!Array.isArray(badges) || badges.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Badges</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Earned group signals</h2>
|
|
<div className="mt-5 grid gap-3">
|
|
{badges.map((badge) => (
|
|
<div key={badge.key} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="font-semibold text-white">{badge.label}</div>
|
|
{badge.awarded_at ? <div className="text-xs text-slate-500">{new Date(badge.awarded_at).toLocaleDateString()}</div> : null}
|
|
</div>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">{badge.reason}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function ContributorHighlights({ contributors }) {
|
|
if (!Array.isArray(contributors) || contributors.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Contributors</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Trusted collaborators</h2>
|
|
<div className="mt-5 space-y-3">
|
|
{contributors.map((entry) => (
|
|
<a key={entry.user?.id} href={entry.user?.profile_url || '#'} className="flex gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
|
|
{entry.user?.avatar_url ? <img src={entry.user.avatar_url} alt={entry.user?.name || entry.user?.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="truncate font-semibold text-white">{entry.user?.name || entry.user?.username}</div>
|
|
{entry.trusted_indicator ? <span className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Trusted</span> : null}
|
|
</div>
|
|
{entry.summary ? <p className="mt-1 text-sm text-slate-400">{entry.summary}</p> : null}
|
|
<div className="mt-2 text-xs text-slate-500">{entry.counts?.releases || 0} releases • {entry.counts?.credited_artworks || 0} artworks • {entry.counts?.projects || 0} projects</div>
|
|
{Array.isArray(entry.badges) && entry.badges.length > 0 ? <div className="mt-3 flex flex-wrap gap-2">{entry.badges.slice(0, 3).map((badge) => <span key={`${entry.user?.id}-${badge.key}`} className="rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-300">{badge.label}</span>)}</div> : null}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
function csrfToken() {
|
|
return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
|
|
}
|
|
|
|
export default function GroupShow() {
|
|
const { props } = usePage()
|
|
const group = props.group || {}
|
|
const section = props.section || 'overview'
|
|
const featuredArtworks = Array.isArray(props.featuredArtworks) ? props.featuredArtworks : []
|
|
const artworks = Array.isArray(props.artworks) ? props.artworks : []
|
|
const featuredCollections = Array.isArray(props.featuredCollections) ? props.featuredCollections : []
|
|
const collections = Array.isArray(props.collections) ? props.collections : []
|
|
const posts = Array.isArray(props.posts) ? props.posts : []
|
|
const projects = Array.isArray(props.projects) ? props.projects : []
|
|
const releases = Array.isArray(props.releases) ? props.releases : []
|
|
const challenges = Array.isArray(props.challenges) ? props.challenges : []
|
|
const events = Array.isArray(props.events) ? props.events : []
|
|
const assets = Array.isArray(props.assets) ? props.assets : []
|
|
const activity = Array.isArray(props.activity) ? props.activity : []
|
|
const recruitment = props.recruitment || null
|
|
const currentJoinRequest = group.current_join_request || null
|
|
const leadership = Array.isArray(props.leadership) ? props.leadership : []
|
|
const members = Array.isArray(props.members) ? props.members : []
|
|
const topContributors = Array.isArray(props.topContributors) ? props.topContributors : []
|
|
const trustSignals = Array.isArray(props.trustSignals) ? props.trustSignals : []
|
|
const badgeShowcase = Array.isArray(props.badgeShowcase) ? props.badgeShowcase : []
|
|
const [following, setFollowing] = useState(Boolean(group.viewer?.is_following))
|
|
const [followersCount, setFollowersCount] = useState(Number(group.counts?.followers || 0))
|
|
const [shareLabel, setShareLabel] = useState('Share')
|
|
const [artworkQuery, setArtworkQuery] = useState('')
|
|
const [artworkSort, setArtworkSort] = useState('latest')
|
|
const contentShellClassName = section === 'artworks'
|
|
? 'mx-auto max-w-7xl px-4 md:px-6'
|
|
: section === 'overview' || section === 'posts'
|
|
? 'mx-auto max-w-7xl px-4 md:px-6'
|
|
: 'mx-auto max-w-6xl px-4'
|
|
|
|
const filteredArtworks = artworks
|
|
.filter((artwork) => {
|
|
const q = normalizeText(artworkQuery)
|
|
if (!q) return true
|
|
|
|
return normalizeText(artwork.title).includes(q) || normalizeText(artwork.author).includes(q)
|
|
})
|
|
.sort((left, right) => {
|
|
if (artworkSort === 'oldest') {
|
|
return new Date(left.published_at || 0).getTime() - new Date(right.published_at || 0).getTime()
|
|
}
|
|
|
|
if (artworkSort === 'title') {
|
|
return String(left.title || '').localeCompare(String(right.title || ''))
|
|
}
|
|
|
|
return new Date(right.published_at || 0).getTime() - new Date(left.published_at || 0).getTime()
|
|
})
|
|
|
|
const groupedMembers = {
|
|
owner: members.filter((member) => member.role === 'owner'),
|
|
admins: members.filter((member) => member.role === 'admin'),
|
|
editors: members.filter((member) => member.role === 'editor'),
|
|
contributors: members.filter((member) => member.role !== 'owner' && member.role !== 'admin' && member.role !== 'editor'),
|
|
}
|
|
|
|
const { share } = useWebShare({
|
|
onFallback: async ({ url }) => {
|
|
if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(url)
|
|
setShareLabel('Link copied')
|
|
window.setTimeout(() => setShareLabel('Share'), 2000)
|
|
return
|
|
}
|
|
|
|
window.prompt('Copy this link', url)
|
|
},
|
|
})
|
|
|
|
const submitReport = async () => {
|
|
if (!props.reportEndpoint) return
|
|
const reason = window.prompt('Reason for reporting this group?')
|
|
if (!reason) return
|
|
await fetch(props.reportEndpoint, {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': csrfToken(),
|
|
},
|
|
body: JSON.stringify({ target_type: 'group', target_id: group.id, reason }),
|
|
})
|
|
}
|
|
|
|
const toggleFollow = async () => {
|
|
const response = await fetch(following ? group.urls?.unfollow : group.urls?.follow, {
|
|
method: following ? 'DELETE' : 'POST',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': csrfToken(),
|
|
},
|
|
})
|
|
const payload = await response.json().catch(() => ({}))
|
|
if (response.ok) {
|
|
setFollowing(Boolean(payload?.following))
|
|
setFollowersCount(Number(payload?.followers_count || 0))
|
|
}
|
|
}
|
|
|
|
const handleShare = async () => {
|
|
const url = group.urls?.public || (typeof window !== 'undefined' ? window.location.href : '')
|
|
|
|
await share({
|
|
title: `${group.name} on Skinbase`,
|
|
text: group.headline || group.bio || 'Check out this Skinbase group.',
|
|
url,
|
|
})
|
|
}
|
|
|
|
const submitJoinRequest = async () => {
|
|
const message = window.prompt('Why do you want to join this group?') || ''
|
|
const desiredRole = window.prompt('Desired role: contributor, editor, or admin', 'contributor') || 'contributor'
|
|
router.post(group.urls?.join_request_store, { message, desired_role: desiredRole })
|
|
}
|
|
|
|
const withdrawJoinRequest = async () => {
|
|
if (!currentJoinRequest?.id || !group.urls?.join_request_withdraw_pattern) return
|
|
router.delete(group.urls.join_request_withdraw_pattern.replace('__JOIN_REQUEST__', String(currentJoinRequest.id)))
|
|
}
|
|
|
|
return (
|
|
<div className="relative min-h-screen overflow-hidden pb-16">
|
|
<SeoHead title={`${group.name} - Skinbase`} description={group.headline || group.bio || 'Skinbase group'} />
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[34rem] opacity-90"
|
|
style={{
|
|
background: 'radial-gradient(circle at top left, rgba(56,189,248,0.18), transparent 32%), radial-gradient(circle at 82% 10%, rgba(16,185,129,0.16), transparent 28%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #0a1220 100%)',
|
|
}}
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 -z-10 opacity-[0.06]"
|
|
style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }}
|
|
/>
|
|
|
|
<GroupHero
|
|
group={group}
|
|
recruitment={recruitment}
|
|
trustSignals={trustSignals}
|
|
following={following}
|
|
followersCount={followersCount}
|
|
currentJoinRequest={currentJoinRequest}
|
|
shareLabel={shareLabel}
|
|
onToggleFollow={toggleFollow}
|
|
onJoinRequest={submitJoinRequest}
|
|
onWithdrawJoinRequest={withdrawJoinRequest}
|
|
onShare={handleShare}
|
|
onReport={submitReport}
|
|
reportEndpoint={props.reportEndpoint}
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<GroupTabs baseUrl={group.urls?.public || '/groups'} activeSection={section} />
|
|
</div>
|
|
|
|
<div className={`${contentShellClassName} pt-6`}>
|
|
|
|
{section === 'overview' ? (
|
|
<div className="mt-8 grid gap-8">
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Highlights</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Featured artworks</h2>
|
|
</div>
|
|
<a href={`${group.urls?.public}/artworks`} className="text-sm font-semibold text-sky-200">Browse all</a>
|
|
</div>
|
|
<ArtworkGrid artworks={featuredArtworks} emptyLabel="No featured artworks yet." />
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Latest work</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Latest artworks</h2>
|
|
</div>
|
|
<a href={`${group.urls?.public}/artworks`} className="text-sm font-semibold text-sky-200">View archive</a>
|
|
</div>
|
|
<ArtworkGrid artworks={artworks.slice(0, 6)} emptyLabel="No published artworks yet." />
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Pipeline</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Recent releases</h2>
|
|
</div>
|
|
<a href={`${group.urls?.public}/releases`} className="text-sm font-semibold text-sky-200">View releases</a>
|
|
</div>
|
|
<ReleaseGrid releases={releases.slice(0, 3)} emptyLabel="No public releases yet." />
|
|
</section>
|
|
|
|
<div className="grid gap-8 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Curated</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Featured collections</h2>
|
|
</div>
|
|
<a href={`${group.urls?.public}/collections`} className="text-sm font-semibold text-sky-200">View collections</a>
|
|
</div>
|
|
<CollectionGrid collections={featuredCollections.length > 0 ? featuredCollections : collections.slice(0, 2)} emptyLabel="No featured collections yet." />
|
|
</section>
|
|
|
|
<div className="grid gap-8">
|
|
{group.pinned_post ? (
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-100/80">Pinned post</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">{group.pinned_post.title}</h2>
|
|
<p className="mt-4 text-sm leading-7 text-slate-300">{group.pinned_post.excerpt || 'Read the latest pinned update from this group.'}</p>
|
|
<a href={group.pinned_post.url} className="mt-4 inline-flex rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white">Read post</a>
|
|
</section>
|
|
) : null}
|
|
|
|
<FocusCard eyebrow="Releases" item={group.featured_release} badgeKey="current_stage" ctaLabel="Open release" />
|
|
<FocusCard eyebrow="Projects" item={group.featured_project} ctaLabel="Open project" />
|
|
<FocusCard eyebrow="Challenges" item={group.active_challenge} ctaLabel="View challenge" />
|
|
<FocusCard eyebrow="Events" item={group.upcoming_event} badgeKey="event_type" ctaLabel="View event" />
|
|
<LeadershipPreview leadership={leadership} />
|
|
<TrustSignalPanel signals={trustSignals} />
|
|
<BadgeShowcase badges={badgeShowcase} />
|
|
<ContributorHighlights contributors={topContributors.slice(0, 4)} />
|
|
|
|
{recruitment?.is_recruiting ? (
|
|
<section className="rounded-[30px] border border-emerald-300/20 bg-emerald-400/10 p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-100/80">Recruiting</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">{recruitment.headline || `${group.name} is looking for collaborators`}</h2>
|
|
<p className="mt-4 text-sm leading-7 text-emerald-50/90">{recruitment.description || 'This group is currently open to new contributors.'}</p>
|
|
{Array.isArray(recruitment.roles) && recruitment.roles.length > 0 ? <div className="mt-4 flex flex-wrap gap-2">{recruitment.roles.map((role) => <span key={role} className="rounded-full border border-white/10 bg-white/[0.08] px-3 py-1.5 text-xs font-semibold text-white">{role}</span>)}</div> : null}
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Resources</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Shared downloads</h2>
|
|
<AssetGrid assets={assets.slice(0, 3)} />
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Public feed</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">Recent activity</h2>
|
|
<ActivityFeed items={activity.slice(0, 4)} />
|
|
</section>
|
|
|
|
<section className="rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">About</p>
|
|
<h2 className="mt-2 text-2xl font-semibold text-white">About {group.name}</h2>
|
|
<p className="mt-5 text-sm leading-7 text-slate-300">{group.bio || 'No long-form description yet.'}</p>
|
|
<div className="mt-5 flex flex-wrap gap-3 text-xs text-slate-400">
|
|
{group.founded_at ? <span>Founded {new Date(group.founded_at).toLocaleDateString()}</span> : null}
|
|
{group.type ? <span>{group.type}</span> : null}
|
|
{group.website_url ? <a href={group.website_url} className="text-sky-200 underline underline-offset-4">Website</a> : null}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{section === 'artworks' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<h2 className="text-2xl font-semibold text-white">Artworks</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Filter the group archive by title or contributor credit label, then change the sort order.</p>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Search</span>
|
|
<input value={artworkQuery} onChange={(event) => setArtworkQuery(event.target.value)} placeholder="Filter artworks" className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Sort</span>
|
|
<select value={artworkSort} onChange={(event) => setArtworkSort(event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none">
|
|
<option value="latest">Latest first</option>
|
|
<option value="oldest">Oldest first</option>
|
|
<option value="title">Title A-Z</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<ArtworkGrid artworks={filteredArtworks} emptyLabel="No published artworks match the current filter." />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'collections' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Collections</h2>
|
|
<CollectionGrid collections={collections} emptyLabel="No collections yet." />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'posts' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Posts</h2>
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2">
|
|
{posts.length > 0 ? posts.map((post) => (
|
|
<a key={post.id} href={post.url} className="rounded-[24px] border border-white/10 bg-black/20 p-4 transition hover:border-white/20">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{post.type}</div>
|
|
{post.is_pinned ? <span className="rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-amber-100">Pinned</span> : null}
|
|
</div>
|
|
<h3 className="mt-2 text-lg font-semibold text-white">{post.title}</h3>
|
|
<p className="mt-2 text-sm leading-6 text-slate-300">{post.excerpt || 'Open the post to read more.'}</p>
|
|
</a>
|
|
)) : <p className="text-sm text-slate-400">No posts published yet.</p>}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'projects' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Projects</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Structured releases, collaboration hubs, and production pages published by this group.</p>
|
|
<CompactCardGrid items={projects} emptyLabel="No public projects yet." />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'releases' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Releases</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Published drops, milestone pipelines, and linked showcases from this group.</p>
|
|
<ReleaseGrid releases={releases} emptyLabel="No public releases yet." />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'challenges' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Challenges</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Current and past prompts, internal sprints, and public-facing challenge runs.</p>
|
|
<CompactCardGrid items={challenges} emptyLabel="No public challenges yet." />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'events' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Events</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Launches, milestones, streams, and other moments on the group timeline.</p>
|
|
<CompactCardGrid items={events} emptyLabel="No public events yet." badgeKey="event_type" />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'activity' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Activity</h2>
|
|
<p className="mt-2 text-sm text-slate-400">Public milestones from posts, releases, events, member changes, and challenge highlights.</p>
|
|
<ActivityFeed items={activity} />
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'members' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">Members</h2>
|
|
<div className="mt-6 grid gap-8">
|
|
{[
|
|
['Owner', groupedMembers.owner],
|
|
['Admins', groupedMembers.admins],
|
|
['Editors', groupedMembers.editors],
|
|
['Contributors', groupedMembers.contributors],
|
|
].map(([label, bucket]) => (
|
|
bucket.length > 0 ? (
|
|
<section key={label}>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h3 className="text-lg font-semibold text-white">{label}</h3>
|
|
<span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-slate-300">{bucket.length}</span>
|
|
</div>
|
|
<div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
|
|
{bucket.map((member) => (
|
|
<a key={member.id} href={member.user?.profile_url || '#'} className="flex items-center gap-3 rounded-[24px] border border-white/10 bg-black/20 px-4 py-4 transition hover:border-white/20">
|
|
{member.user?.avatar_url ? <img src={member.user.avatar_url} alt={member.user.name || member.user.username} className="h-12 w-12 rounded-2xl object-cover" /> : <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.03] text-slate-400"><i className="fa-solid fa-user" /></div>}
|
|
<div className="min-w-0">
|
|
<div className="truncate font-semibold text-white">{member.user?.name || member.user?.username}</div>
|
|
<div className="text-xs uppercase tracking-[0.16em] text-slate-400">{member.role_label || member.role}</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{section === 'about' ? (
|
|
<section className="mt-8 rounded-[30px] border border-white/10 bg-white/[0.03] p-6">
|
|
<h2 className="text-2xl font-semibold text-white">About</h2>
|
|
<div className="mt-5 space-y-4 text-sm leading-7 text-slate-300">
|
|
<p>{group.bio || 'No long-form description yet.'}</p>
|
|
{group.website_url ? <p><a href={group.website_url} className="text-sky-200 underline underline-offset-4">{group.website_url}</a></p> : null}
|
|
{Array.isArray(group.links) && group.links.length > 0 ? <div className="flex flex-wrap gap-3">{group.links.map((link) => <a key={`${link.label}-${link.url}`} href={link.url} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-xs font-semibold text-white">{link.label}</a>)}</div> : null}
|
|
{group.founded_at ? <p>Founded: {new Date(group.founded_at).toLocaleDateString()}</p> : null}
|
|
{group.type ? <p>Type: {group.type}</p> : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |