Другой роутинг

apps/web/src/app/catalog/page.tsx

@@ -1,36 +1,41 @@
-import { Suspense } from 'react';
 import { products } from '@/data/products';
-import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb';
-import { CatalogSidebar } from '@/components/CatalogSidebar/CatalogSidebar';
-import { ProductCard } from '@/components/ProductCard/ProductCard';
-import styles from './page.module.scss';
+import { categoryNameMap, CategorySlug } from '@/types';
+import { filterProducts, parseSearchParams } from '@/lib/filterProducts';
+import { CatalogView } from '@/components/CatalogView/CatalogView';
 
-export const metadata = {
-  title: 'Каталог | PAN-PROM',
-};
+export async function generateMetadata({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const params = await searchParams;
+  const category = params.category as string | undefined;
+  const catName = category
+    ? categoryNameMap[category as CategorySlug]
+    : undefined;
+
+  const title = catName
+    ? `${catName} | Каталог | PAN-PROM`
+    : 'Каталог | PAN-PROM';
+
+  return { title };
+}
+
+export default async function CatalogPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const params = await searchParams;
+  const filters = parseSearchParams(params);
+  const filtered = filterProducts(products, filters);
+
+  const breadcrumbItems = [
+    { label: 'Главная', href: '/' },
+    { label: 'Каталог' },
+  ];
 
-export default function CatalogPage() {
   return (
-    <div className={styles.layout}>
-      <Suspense fallback={null}>
-        <CatalogSidebar />
-      </Suspense>
-      <div className={styles.main}>
-        <div className={styles.header}>
-          <Breadcrumb
-            items={[
-              { label: 'Главная', href: '/' },
-              { label: 'Каталог' },
-            ]}
-          />
-          <span className={styles.count}>{products.length} позиций</span>
-        </div>
-        <div className={styles.grid}>
-          {products.map((p) => (
-            <ProductCard key={p.id} product={p} />
-          ))}
-        </div>
-      </div>
-    </div>
+    <CatalogView products={filtered} breadcrumbItems={breadcrumbItems} />
   );
 }