59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import Link from "next/link";
|
||
|
||
import { getCatalog } from "@/lib/api";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
const SORTS = [
|
||
["price_asc", "Сначала дешевле"],
|
||
["price_desc", "Сначала дороже"],
|
||
["new", "Новые"],
|
||
] as const;
|
||
|
||
export default async function CatalogPage({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Promise<{ category_id?: string; sort?: string }>;
|
||
}) {
|
||
const params = await searchParams;
|
||
const sort = SORTS.some(([value]) => value === params.sort) ? params.sort! : "price_asc";
|
||
const catalog = await getCatalog(params.category_id, sort);
|
||
|
||
return (
|
||
<>
|
||
<h1>Каталог</h1>
|
||
<div className="row">
|
||
<Link href={`/?sort=${sort}`}>Все</Link>
|
||
{catalog.categories.map((category) => (
|
||
<Link key={category.id} href={`/?category_id=${category.id}&sort=${sort}`}>
|
||
{category.name}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="row">
|
||
{SORTS.map(([value, label]) => (
|
||
<Link
|
||
key={value}
|
||
href={params.category_id ? `/?category_id=${params.category_id}&sort=${value}` : `/?sort=${value}`}
|
||
>
|
||
{label}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="grid">
|
||
{catalog.products.map((product) => (
|
||
<article className="card" key={product.id}>
|
||
<Link href={`/products/${product.id}`}>
|
||
<img src={`/backend/products/${product.id}/image`} alt="" />
|
||
<h2>{product.title}</h2>
|
||
</Link>
|
||
<p className="muted">{product.category_name}</p>
|
||
<p>{product.price} ₽</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
{catalog.products.length === 0 && <p>В этой категории нет активных товаров.</p>}
|
||
</>
|
||
);
|
||
}
|