150 lines
7.2 KiB
JavaScript
150 lines
7.2 KiB
JavaScript
import React from 'react'
|
|
import CategoryCard from '../../components/forum/CategoryCard'
|
|
|
|
export default function ForumIndex({ categories = [], trendingTopics = [], latestTopics = [] }) {
|
|
const totalThreads = categories.reduce((sum, cat) => sum + (Number(cat?.thread_count) || 0), 0)
|
|
const totalPosts = categories.reduce((sum, cat) => sum + (Number(cat?.post_count) || 0), 0)
|
|
const sortedByActivity = [...categories].sort((a, b) => {
|
|
const aTime = a?.last_activity_at ? new Date(a.last_activity_at).getTime() : 0
|
|
const bTime = b?.last_activity_at ? new Date(b.last_activity_at).getTime() : 0
|
|
return bTime - aTime
|
|
})
|
|
const latestActive = sortedByActivity[0] ?? null
|
|
|
|
return (
|
|
<div className="pb-20">
|
|
<section className="relative overflow-hidden border-b border-white/10 bg-[radial-gradient(circle_at_15%_20%,rgba(34,211,238,0.24),transparent_40%),radial-gradient(circle_at_80%_0%,rgba(56,189,248,0.16),transparent_42%),linear-gradient(180deg,rgba(10,14,26,0.96),rgba(8,12,22,0.92))]">
|
|
<div className="pointer-events-none absolute inset-0 opacity-40 [background-image:linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] [background-size:40px_40px]" />
|
|
|
|
<div className="relative mx-auto w-full max-w-[1400px] px-4 py-10 sm:px-6 lg:px-10 lg:py-14">
|
|
<div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-end">
|
|
<div>
|
|
<p className="mb-2 inline-flex items-center gap-2 rounded-full border border-cyan-300/30 bg-cyan-300/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-100">
|
|
Community Hub
|
|
</p>
|
|
<h1 className="text-4xl font-black leading-[0.95] tracking-[-0.02em] text-white sm:text-5xl lg:text-6xl">
|
|
Skinbase Forum
|
|
</h1>
|
|
<p className="mt-4 max-w-2xl text-sm leading-relaxed text-slate-200/80 sm:text-base">
|
|
Ask questions, share progress, and join focused conversations across every part of Skinbase.
|
|
This page is your launch point to active topics and community knowledge.
|
|
</p>
|
|
|
|
<div className="mt-6 flex flex-wrap items-center gap-3">
|
|
<a href="/forum" className="inline-flex items-center gap-2 rounded-xl bg-cyan-400 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-300">
|
|
Explore Categories
|
|
<span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
|
|
<StatCard label="Sections" value={number(categories.length)} />
|
|
<StatCard label="Topics" value={number(totalThreads)} />
|
|
<StatCard label="Posts" value={number(totalPosts)} />
|
|
</div>
|
|
</div>
|
|
|
|
{latestActive && (
|
|
<div className="mt-7 rounded-2xl border border-white/15 bg-white/[0.04] p-4 backdrop-blur">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/50">Latest Activity</p>
|
|
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
|
|
<a
|
|
href={`/forum/${latestActive.board_slug ?? latestActive.slug}`}
|
|
className="text-base font-semibold text-cyan-200 transition hover:text-cyan-100"
|
|
>
|
|
{latestActive.name}
|
|
</a>
|
|
<span className="text-xs text-white/45">{formatLastActivity(latestActive.last_activity_at)}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto w-full max-w-[1400px] px-4 pt-8 sm:px-6 lg:px-10">
|
|
<div className="mb-5 flex items-end justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-white/40">Browse</p>
|
|
<h2 className="mt-1 text-2xl font-bold text-white sm:text-3xl">Forum Sections</h2>
|
|
</div>
|
|
<p className="text-xs text-white/50 sm:text-sm">Choose a section to view threads or start a discussion.</p>
|
|
</div>
|
|
|
|
{/* Category grid */}
|
|
{categories.length === 0 ? (
|
|
<div className="rounded-2xl border border-white/[0.08] bg-nova-800/50 p-12 text-center">
|
|
<svg className="mx-auto mb-4 text-zinc-600" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
|
</svg>
|
|
<p className="text-sm text-zinc-400">No forum categories available yet.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
|
{categories.map((cat) => (
|
|
<CategoryCard key={cat.id ?? cat.slug} category={cat} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="mx-auto grid w-full max-w-[1400px] gap-5 px-4 pt-8 sm:px-6 lg:grid-cols-2 lg:px-10">
|
|
<Panel title="Trending Topics" items={trendingTopics} emptyLabel="Trending topics will appear once boards become active." />
|
|
<Panel title="Latest Topics" items={latestTopics} emptyLabel="Latest topics will appear here." />
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Panel({ title, items, emptyLabel }) {
|
|
return (
|
|
<div className="rounded-2xl border border-white/[0.08] bg-nova-800/50 p-5 backdrop-blur">
|
|
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
|
{items.length === 0 ? (
|
|
<p className="mt-3 text-sm text-white/45">{emptyLabel}</p>
|
|
) : (
|
|
<div className="mt-4 space-y-3">
|
|
{items.map((item) => (
|
|
<a key={item.slug} href={`/forum/topic/${item.slug}`} className="block rounded-xl border border-white/6 px-4 py-3 transition hover:border-cyan-400/20 hover:bg-white/[0.03]">
|
|
<div className="text-sm font-semibold text-white">{item.title}</div>
|
|
<div className="mt-1 flex flex-wrap gap-3 text-xs text-white/45">
|
|
{item.board && <span>{item.board}</span>}
|
|
{item.author && <span>by {item.author}</span>}
|
|
{typeof item.replies_count === 'number' && <span>{item.replies_count} replies</span>}
|
|
{item.score !== undefined && <span>score {item.score}</span>}
|
|
{item.last_post_at && <span>{formatLastActivity(item.last_post_at)}</span>}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatCard({ label, value }) {
|
|
return (
|
|
<div className="rounded-xl border border-white/15 bg-white/[0.04] px-4 py-3 backdrop-blur">
|
|
<p className="text-[11px] uppercase tracking-[0.14em] text-white/50">{label}</p>
|
|
<p className="mt-1 text-2xl font-bold text-white">{value}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function number(n) {
|
|
return (n ?? 0).toLocaleString()
|
|
}
|
|
|
|
function formatLastActivity(value) {
|
|
if (!value) {
|
|
return 'No recent activity'
|
|
}
|
|
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) {
|
|
return 'No recent activity'
|
|
}
|
|
|
|
return `Updated ${date.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}`
|
|
}
|