128 lines
4.3 KiB
JavaScript
128 lines
4.3 KiB
JavaScript
import React from 'react'
|
|
import CollectionCard from '../../components/profile/collections/CollectionCard'
|
|
|
|
function normalizeItems(items) {
|
|
if (!Array.isArray(items)) return []
|
|
|
|
return items.filter((item) => item && typeof item === 'object')
|
|
}
|
|
|
|
function SectionHeader({ title, subtitle, href, ctaLabel = 'See all' }) {
|
|
return (
|
|
<div className="mb-5 flex items-end justify-between gap-4">
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">{title}</h3>
|
|
{subtitle ? <p className="mt-1 text-xs text-nova-400">{subtitle}</p> : null}
|
|
</div>
|
|
{href ? (
|
|
<a href={href} className="shrink-0 text-sm text-nova-300 transition hover:text-white">
|
|
{ctaLabel} →
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CollectionStrip({ items }) {
|
|
if (!items.length) return null
|
|
|
|
return (
|
|
<div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
|
|
{items.map((collection) => (
|
|
<CollectionCard key={collection.id} collection={collection} isOwner={false} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CollectionSection({ title, subtitle, href, items, limit = 3, ctaLabel }) {
|
|
const normalized = normalizeItems(items).slice(0, limit)
|
|
if (!normalized.length) return null
|
|
|
|
return (
|
|
<section className="mt-10">
|
|
<SectionHeader title={title} subtitle={subtitle} href={href} ctaLabel={ctaLabel} />
|
|
<CollectionStrip items={normalized} />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default function HomeCollections({
|
|
featured,
|
|
recent,
|
|
trending,
|
|
editorial,
|
|
community,
|
|
isLoggedIn = false,
|
|
}) {
|
|
const featuredItems = normalizeItems(featured)
|
|
const recentItems = normalizeItems(recent)
|
|
const trendingItems = normalizeItems(trending)
|
|
const editorialItems = normalizeItems(editorial)
|
|
const communityItems = normalizeItems(community)
|
|
|
|
if (!featuredItems.length && !recentItems.length && !trendingItems.length && !editorialItems.length && !communityItems.length) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section className="mt-14 px-4 sm:px-6 lg:px-8">
|
|
<div className="mb-6 flex flex-wrap items-end justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-white">Curated Collections</h2>
|
|
<p className="mt-1 max-w-2xl text-sm text-nova-300">
|
|
Hand-built galleries, smart collections, and community showcases worth opening next.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-nova-400">
|
|
{isLoggedIn && recentItems.length ? <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1">Recent</span> : null}
|
|
{featuredItems.length ? <span className="rounded-full border border-amber-300/20 bg-amber-300/10 px-3 py-1 text-amber-100">Featured</span> : null}
|
|
{communityItems.length ? <span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-sky-100">Community</span> : null}
|
|
</div>
|
|
</div>
|
|
|
|
<CollectionSection
|
|
title="Featured Collections"
|
|
subtitle="Standout galleries with strong sequencing, presentation, or curator voice."
|
|
href="/collections/featured"
|
|
items={featuredItems}
|
|
limit={3}
|
|
/>
|
|
|
|
{isLoggedIn ? (
|
|
<CollectionSection
|
|
title="Recently Active"
|
|
subtitle="Fresh collection activity from around the site, including new updates and resurfacing galleries."
|
|
href="/collections/trending"
|
|
items={recentItems}
|
|
limit={3}
|
|
/>
|
|
) : null}
|
|
|
|
<CollectionSection
|
|
title="Trending Collections"
|
|
subtitle="Collections getting the strongest mix of follows, saves, and engagement right now."
|
|
href="/collections/trending"
|
|
items={trendingItems}
|
|
limit={3}
|
|
/>
|
|
|
|
<CollectionSection
|
|
title="Editorial Picks"
|
|
subtitle="Staff and premium editorial showcases with stronger themes and presentation rules."
|
|
href="/collections/editorial"
|
|
items={editorialItems}
|
|
limit={3}
|
|
/>
|
|
|
|
<CollectionSection
|
|
title="Community Highlights"
|
|
subtitle="Collaborative and submission-friendly collections that spotlight multiple creators together."
|
|
href="/collections/community"
|
|
items={communityItems}
|
|
limit={3}
|
|
/>
|
|
</section>
|
|
)
|
|
}
|