75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { listBlogs } from "@/lib/meshkee/api";
|
|
import { formatDate } from "@/lib/meshkee/format";
|
|
import { blogHref } from "@/lib/meshkee/urls";
|
|
|
|
type SearchParams = Promise<{ page?: string }>;
|
|
|
|
export const metadata = {
|
|
title: "مجله دکوراسیون | مبلمان هومت",
|
|
description: "مقالات و راهنمای خرید مبلمان و دکوراسیون از مبلمان هومت",
|
|
};
|
|
|
|
export default async function BlogPage({
|
|
searchParams,
|
|
}: {
|
|
searchParams: SearchParams;
|
|
}) {
|
|
const params = await searchParams;
|
|
const page = Math.max(1, Number(params.page) || 1);
|
|
const data = await listBlogs({ page, pageSize: 12 });
|
|
|
|
return (
|
|
<main className="container">
|
|
<section className="page-hero">
|
|
<p className="eyebrow">Blog</p>
|
|
<h1>مجله دکوراســـــــــیون</h1>
|
|
<p>راهنماها و مقالات تخصصی برای انتخاب بهتر مبلمان و چیدمان خانه.</p>
|
|
</section>
|
|
|
|
<section className="section blog-grid-section">
|
|
{data.items.length === 0 ? (
|
|
<p className="empty-note">مقالهای برای نمایش وجود ندارد.</p>
|
|
) : (
|
|
<div className="blog-grid">
|
|
{data.items.map((post) => (
|
|
<Link key={post.id} href={blogHref(post.id, post.title)} className="blog-card">
|
|
<div className="blog-card-media">
|
|
{post.titleImageUrl ? (
|
|
<Image
|
|
src={post.titleImageUrl}
|
|
alt={post.title}
|
|
width={640}
|
|
height={420}
|
|
/>
|
|
) : (
|
|
<div className="store-card-fallback" />
|
|
)}
|
|
</div>
|
|
<div className="blog-card-body">
|
|
<time>{formatDate(post.publishedAt || post.createdAt)}</time>
|
|
<h2>{post.title}</h2>
|
|
{post.abstract ? <p>{post.abstract}</p> : null}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{data.total > data.pageSize ? (
|
|
<div className="pager">
|
|
{page > 1 ? <Link href={`/blog?page=${page - 1}`}>قبلی</Link> : null}
|
|
<span className="ltr-number" dir="ltr" lang="en">
|
|
{page}
|
|
</span>
|
|
{page * data.pageSize < data.total ? (
|
|
<Link href={`/blog?page=${page + 1}`}>بعدی</Link>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|