69 lines
3.3 KiB
JavaScript
69 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import Breadcrumbs from '../../components/forum/Breadcrumbs'
|
|
|
|
export default function ForumSection({ category, boards = [] }) {
|
|
const name = category?.name ?? 'Forum Section'
|
|
const description = category?.description
|
|
const preview = category?.preview_image ?? '/images/forum/default.jpg'
|
|
|
|
const breadcrumbs = [
|
|
{ label: 'Home', href: '/' },
|
|
{ label: 'Forum', href: '/forum' },
|
|
{ label: name },
|
|
]
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl px-4 pb-20 pt-10 sm:px-6 lg:px-8">
|
|
<Breadcrumbs items={breadcrumbs} />
|
|
|
|
<section className="mt-5 overflow-hidden rounded-3xl border border-white/10 bg-nova-800/55 shadow-xl backdrop-blur">
|
|
<div className="relative h-56 overflow-hidden sm:h-64">
|
|
<img src={preview} alt={`${name} preview`} className="h-full w-full object-cover object-center" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-200/85">Forum Section</p>
|
|
<h1 className="mt-2 text-3xl font-black text-white sm:text-4xl">{name}</h1>
|
|
{description && <p className="mt-2 max-w-3xl text-sm text-white/70 sm:text-base">{description}</p>}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-8 rounded-2xl border border-white/8 bg-nova-800/45 p-5 backdrop-blur sm:p-6">
|
|
<div className="flex items-end justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-white/40">Subcategories</p>
|
|
<h2 className="mt-1 text-2xl font-bold text-white">Browse boards</h2>
|
|
</div>
|
|
<p className="text-xs text-white/45 sm:text-sm">Select a board to open its thread list.</p>
|
|
</div>
|
|
|
|
{boards.length === 0 ? (
|
|
<div className="py-12 text-center text-sm text-white/45">No boards are available in this section yet.</div>
|
|
) : (
|
|
<div className="mt-5 grid gap-4 md:grid-cols-2">
|
|
{boards.map((board) => (
|
|
<a key={board.id ?? board.slug} href={`/forum/${board.slug}`} className="rounded-2xl border border-white/8 bg-white/[0.02] p-5 transition hover:border-cyan-400/25 hover:bg-white/[0.04]">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white">{board.title}</h3>
|
|
{board.description && <p className="mt-2 text-sm text-white/55">{board.description}</p>}
|
|
</div>
|
|
<span className="rounded-full border border-cyan-300/20 bg-cyan-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-cyan-200">
|
|
Open
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-4 flex flex-wrap gap-4 text-xs text-white/50">
|
|
<span>{board.topics_count ?? 0} topics</span>
|
|
<span>{board.posts_count ?? 0} posts</span>
|
|
{board.latest_topic?.title && <span>Latest: {board.latest_topic.title}</span>}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|