79 lines
4.3 KiB
JavaScript
79 lines
4.3 KiB
JavaScript
import React from 'react'
|
||
import { usePage } from '@inertiajs/react'
|
||
import SeoHead from '../../components/seo/SeoHead'
|
||
import GroupPromoCard from '../../components/groups/GroupPromoCard'
|
||
import GroupTrendingSection from '../../components/groups/GroupTrendingSection'
|
||
import GroupBrowseFilters from '../../components/groups/GroupBrowseFilters'
|
||
import GroupDiscoveryCard from '../../components/groups/GroupDiscoveryCard'
|
||
import GroupLeaderboardCard from '../../components/groups/GroupLeaderboardCard'
|
||
|
||
export default function GroupIndex() {
|
||
const { props } = usePage()
|
||
const groups = props.groups?.data || []
|
||
const surfaces = Array.isArray(props.surfaces) ? props.surfaces : []
|
||
const currentSurface = props.currentSurface || 'featured'
|
||
const highlightSections = Array.isArray(props.highlightSections) ? props.highlightSections : []
|
||
const leaderboardItems = Array.isArray(props.leaderboard?.items) ? props.leaderboard.items : []
|
||
|
||
return (
|
||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
||
<SeoHead title="Groups - Skinbase" description={props.description} />
|
||
<div className="mx-auto max-w-6xl">
|
||
<section className="rounded-[32px] border border-white/10 bg-white/[0.03] p-6">
|
||
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Groups</p>
|
||
<h1 className="mt-2 text-4xl font-semibold text-white">Collective publishing identities</h1>
|
||
<p className="mt-4 max-w-3xl text-sm leading-6 text-slate-300">Discover collaborative studios, follow shared creative brands, and browse the artworks, releases, and collections published under each group identity.</p>
|
||
<GroupBrowseFilters surfaces={surfaces} currentSurface={currentSurface} />
|
||
</section>
|
||
|
||
<div className="mt-8">
|
||
<GroupPromoCard
|
||
group={props.spotlightGroup}
|
||
eyebrow="Public groups"
|
||
title="Find collaborative identities with real momentum"
|
||
description="Groups now sit alongside creators and artworks across Nova, making shared publishing, team recruitment, and release-driven collaboration easier to discover."
|
||
ctaLabel="Open spotlight"
|
||
/>
|
||
</div>
|
||
|
||
{highlightSections.map((section) => (
|
||
<GroupTrendingSection
|
||
key={section.key}
|
||
title={section.title}
|
||
description={section.description}
|
||
items={section.items || []}
|
||
href={`/groups?surface=${encodeURIComponent(section.key)}`}
|
||
/>
|
||
))}
|
||
|
||
{leaderboardItems.length > 0 ? (
|
||
<section className="mt-10">
|
||
<div className="mb-5 flex items-end justify-between gap-4">
|
||
<div>
|
||
<h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Monthly group leaderboard</h2>
|
||
<p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">A fast view of the collaborative teams moving the most attention and publishing energy right now.</p>
|
||
</div>
|
||
<a href="/leaderboard?type=groups&period=monthly" className="text-sm font-semibold text-sky-200 transition hover:text-white">View leaderboard</a>
|
||
</div>
|
||
<div className="grid gap-4 xl:grid-cols-3">
|
||
{leaderboardItems.slice(0, 3).map((item) => <GroupLeaderboardCard key={item.entity?.id || item.rank} item={item} />)}
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
|
||
<section className="mt-10">
|
||
<div className="mb-5 flex items-end justify-between gap-4">
|
||
<div>
|
||
<h2 className="text-2xl font-semibold tracking-[-0.02em] text-white">Browse groups</h2>
|
||
<p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">Filter the directory by discovery surface, then jump into each group’s public page for artworks, releases, projects, events, and activity.</p>
|
||
</div>
|
||
<div className="text-sm text-slate-500">{Number(props.groups?.meta?.total || 0).toLocaleString()} public groups</div>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||
{groups.map((group) => <GroupDiscoveryCard key={group.slug || group.id} group={group} />)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
)
|
||
} |