feat: categories — pages, nav, home block, admin editor select

2026-05-31 14:43:28 +03:00
parent 80325b4435
commit 14053131cd
5 changed files with 148 additions and 4 deletions
@@ -0,0 +1,88 @@
+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 />
+    </>
+  );
+}