Alexey Pavlov
89 lines
3.9 KiB
JavaScript
89 lines
3.9 KiB
JavaScript
import { notFound } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import Header from '@/components/Header';
|
|
import Footer from '@/components/Footer';
|
|
import ArticleCard from '@/components/ArticleCard';
|
|
import { listCategories, getCategoryArticles } from '@/lib/engine';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
const COLOR_MAP = {
|
|
emerald: { bg: 'bg-emerald-50 dark:bg-emerald-950', text: 'text-emerald-700 dark:text-emerald-300', border: 'border-emerald-200 dark:border-emerald-800' },
|
|
red: { bg: 'bg-red-50 dark:bg-red-950', text: 'text-red-700 dark:text-red-300', border: 'border-red-200 dark:border-red-800' },
|
|
amber: { bg: 'bg-amber-50 dark:bg-amber-950', text: 'text-amber-700 dark:text-amber-300', border: 'border-amber-200 dark:border-amber-800' },
|
|
blue: { bg: 'bg-blue-50 dark:bg-blue-950', text: 'text-blue-700 dark:text-blue-300', border: 'border-blue-200 dark:border-blue-800' },
|
|
};
|
|
|
|
export async function generateMetadata({ params }) {
|
|
const { slug } = await params;
|
|
const cats = await listCategories();
|
|
const cat = cats.find(c => c.slug === slug);
|
|
if (!cat) return { title: 'Категория не найдена' };
|
|
return {
|
|
title: `${cat.name} — ZeroPost`,
|
|
description: cat.description,
|
|
alternates: { canonical: `https://zeropost.ru/category/${slug}` },
|
|
};
|
|
}
|
|
|
|
export default async function CategoryPage({ params }) {
|
|
const { slug } = await params;
|
|
const [cats, articles] = await Promise.all([
|
|
listCategories(),
|
|
getCategoryArticles(slug, { limit: 30 }),
|
|
]);
|
|
const cat = cats.find(c => c.slug === slug);
|
|
if (!cat) notFound();
|
|
|
|
const colors = COLOR_MAP[cat.color] || COLOR_MAP.emerald;
|
|
|
|
return (
|
|
<>
|
|
<Header />
|
|
<div className="container-wide pt-8 pb-16">
|
|
|
|
{/* Шапка категории */}
|
|
<div className={`rounded-2xl border ${colors.border} ${colors.bg} px-6 py-8 mb-10`}>
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<span className="text-3xl">{cat.icon}</span>
|
|
<h1 className={`text-2xl sm:text-3xl font-bold ${colors.text}`}>{cat.name}</h1>
|
|
</div>
|
|
<p className="text-neutral-600 dark:text-neutral-400 max-w-xl">{cat.description}</p>
|
|
<div className="mt-4 text-sm text-neutral-400">{articles.length} {articles.length === 1 ? 'статья' : articles.length < 5 ? 'статьи' : 'статей'}</div>
|
|
</div>
|
|
|
|
{/* Навигация по категориям */}
|
|
<div className="flex flex-wrap gap-2 mb-8">
|
|
{cats.map(c => (
|
|
<Link
|
|
key={c.slug}
|
|
href={`/category/${c.slug}`}
|
|
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium border transition-colors ${
|
|
c.slug === slug
|
|
? `${(COLOR_MAP[c.color]||COLOR_MAP.emerald).bg} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).text} ${(COLOR_MAP[c.color]||COLOR_MAP.emerald).border}`
|
|
: 'bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:border-neutral-300'
|
|
}`}
|
|
>
|
|
<span>{c.icon}</span> {c.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Статьи */}
|
|
{articles.length > 0 ? (
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
|
|
{articles.map(a => <ArticleCard key={a.id} article={a} />)}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-20">
|
|
<div className="text-4xl mb-4">{cat.icon}</div>
|
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Статей пока нет</h2>
|
|
<p className="text-sm text-neutral-500">Скоро здесь появятся материалы по теме «{cat.name}»</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|