62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { Suspense } from 'react';
|
||
import { Product, Brand, Category } from '@/types';
|
||
import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb';
|
||
import { CatalogSidebar } from '@/components/CatalogSidebar/CatalogSidebar';
|
||
import { ProductCard } from '@/components/ProductCard/ProductCard';
|
||
import styles from './CatalogView.module.scss';
|
||
|
||
interface BreadcrumbItem {
|
||
label: string;
|
||
href?: string;
|
||
}
|
||
|
||
interface CatalogViewProps {
|
||
products: Product[];
|
||
breadcrumbItems: BreadcrumbItem[];
|
||
basePath?: string;
|
||
hiddenFilters?: string[];
|
||
brands: Brand[];
|
||
categories: Category[];
|
||
allProducts?: Product[];
|
||
}
|
||
|
||
export function CatalogView({
|
||
products,
|
||
breadcrumbItems,
|
||
basePath = '/catalog',
|
||
hiddenFilters,
|
||
brands,
|
||
categories,
|
||
allProducts,
|
||
}: CatalogViewProps) {
|
||
return (
|
||
<div className={styles.layout}>
|
||
<Suspense fallback={null}>
|
||
<CatalogSidebar
|
||
basePath={basePath}
|
||
hiddenFilters={hiddenFilters}
|
||
brands={brands}
|
||
categories={categories}
|
||
products={allProducts ?? products}
|
||
/>
|
||
</Suspense>
|
||
<div className={styles.main}>
|
||
<div className={styles.header}>
|
||
<Breadcrumb items={breadcrumbItems} />
|
||
<span className={styles.count}>{products.length} позиций</span>
|
||
</div>
|
||
<div className={styles.grid}>
|
||
{products.map((p) => (
|
||
<ProductCard key={p.id} product={p} />
|
||
))}
|
||
</div>
|
||
{products.length === 0 && (
|
||
<p className={styles.empty}>
|
||
По выбранным фильтрам ничего не найдено.
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|