111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { listStoreItems } from "@/lib/meshkee/api";
|
|
import {
|
|
formatPrice,
|
|
storeItemName,
|
|
storeItemPrice,
|
|
} from "@/lib/meshkee/format";
|
|
import { storeItemHref } from "@/lib/meshkee/urls";
|
|
|
|
type SearchParams = Promise<{
|
|
categoryId?: string;
|
|
page?: string;
|
|
}>;
|
|
|
|
export const metadata = {
|
|
title: "فروشگاه | مبلمان هومت",
|
|
description: "لیست محصولات قابل خرید فروشگاه مبلمان هومت",
|
|
};
|
|
|
|
export default async function StorePage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: SearchParams;
|
|
}) {
|
|
const params = await searchParams;
|
|
const page = Math.max(1, Number(params.page) || 1);
|
|
const data = await listStoreItems({
|
|
page,
|
|
pageSize: 24,
|
|
categoryId: params.categoryId,
|
|
});
|
|
|
|
return (
|
|
<main className="container">
|
|
<section className="page-hero">
|
|
<p className="eyebrow">Store</p>
|
|
<h1>فروشــــــــگاه هومــــــــت</h1>
|
|
<p>محصولات قابل سفارش را مشاهده کنید و به سبد خرید اضافه کنید.</p>
|
|
</section>
|
|
|
|
<section className="section store-grid-section">
|
|
{data.items.length === 0 ? (
|
|
<p className="empty-note">در حال حاضر محصول فروشگاهی فعالی وجود ندارد.</p>
|
|
) : (
|
|
<div className="store-grid">
|
|
{data.items.map((item) => {
|
|
const name = storeItemName(item);
|
|
const href = storeItemHref(item.id, name);
|
|
const price = storeItemPrice(item);
|
|
return (
|
|
<Link key={item.id} href={href} className="store-card">
|
|
<div className="store-card-media">
|
|
{item.productImage ? (
|
|
<Image
|
|
src={item.productImage}
|
|
alt={name}
|
|
width={480}
|
|
height={480}
|
|
/>
|
|
) : (
|
|
<div className="store-card-fallback" />
|
|
)}
|
|
</div>
|
|
<div className="store-card-body">
|
|
{item.label ? <p className="eyebrow">{item.label}</p> : null}
|
|
<h2>{name}</h2>
|
|
<strong className="ltr-number" dir="ltr" lang="en">
|
|
{formatPrice(price)}
|
|
</strong>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{data.total > data.pageSize ? (
|
|
<div className="pager">
|
|
{page > 1 ? (
|
|
<Link
|
|
href={`/store?page=${page - 1}${
|
|
params.categoryId
|
|
? `&categoryId=${encodeURIComponent(params.categoryId)}`
|
|
: ""
|
|
}`}
|
|
>
|
|
قبلی
|
|
</Link>
|
|
) : null}
|
|
<span className="ltr-number" dir="ltr" lang="en">
|
|
{page}
|
|
</span>
|
|
{page * data.pageSize < data.total ? (
|
|
<Link
|
|
href={`/store?page=${page + 1}${
|
|
params.categoryId
|
|
? `&categoryId=${encodeURIComponent(params.categoryId)}`
|
|
: ""
|
|
}`}
|
|
>
|
|
بعدی
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|