51 lines
2.3 KiB
JavaScript
51 lines
2.3 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { PageShell } from "../components";
|
|
import { getStoreItems } from "../meshkee";
|
|
import { pageMetadata } from "../seo";
|
|
|
|
export const metadata = pageMetadata({
|
|
title: "فروشگاه تجهیزات سرور",
|
|
description: "مشاهده و جستجوی محصولات فروشگاهی آریا شبکه پیشرو شامل سرور HP، رم سرور، هارد سرور، CPU و تجهیزات شبکه.",
|
|
path: "/store"
|
|
});
|
|
|
|
export default async function StorePage({ searchParams }) {
|
|
const resolvedSearchParams = await searchParams;
|
|
const query = resolvedSearchParams?.q || "";
|
|
const { items, fallback } = await getStoreItems({ pageSize: 16, query });
|
|
|
|
return (
|
|
<PageShell>
|
|
<section className="page-hero store-hero">
|
|
<div className="container">
|
|
<span>STORE ITEMS</span>
|
|
<h1>فروشگاه تجهیزات سرور</h1>
|
|
<p>لیست محصولات فروشگاهی از Meshkee خوانده می شود و در صورت نبود داده، محصولات شاخص سایت نمایش داده می شوند.</p>
|
|
</div>
|
|
</section>
|
|
<section className="section">
|
|
<div className="container">
|
|
<form className="store-toolbar" role="search">
|
|
<input name="q" defaultValue={query} placeholder="جستجوی سرور، رم، هارد یا CPU" />
|
|
<button>جستجو</button>
|
|
</form>
|
|
{fallback ? <p className="api-note">فعلا آیتمی از API فروشگاه برنگشت؛ نمایش محصولات نمونه فعال است.</p> : null}
|
|
<div className="product-grid store-grid">
|
|
{items.map((item) => (
|
|
<Link className="product-card" href={`/store/${item.id}`} key={item.id}>
|
|
<div className="product-image">
|
|
<Image src={item.image} alt={item.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
|
|
</div>
|
|
<span>{item.category}</span>
|
|
<h3>{item.title}</h3>
|
|
<strong>{item.price ? `${item.price} ${item.currency}` : "تماس با فروشگاه"}</strong>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</PageShell>
|
|
);
|
|
}
|