66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { Media } from "@/components/Media";
|
|
import { PageHero } from "@/components/PageHero";
|
|
import { Pagination } from "@/components/Pagination";
|
|
import { getBlogs } from "@/lib/api";
|
|
import { mapBlog } from "@/lib/mappers";
|
|
import { SITE } from "@/lib/site";
|
|
|
|
export const metadata: Metadata = {
|
|
title: `وبلاگ | ${SITE.nameFa}`,
|
|
description: "آخرین مقالات سالار استور",
|
|
};
|
|
|
|
type Props = {
|
|
searchParams: Promise<{ page?: string }>;
|
|
};
|
|
|
|
export default async function BlogPage({ searchParams }: Props) {
|
|
const { page: pageParam } = await searchParams;
|
|
const page = Math.max(1, Number(pageParam) || 1);
|
|
let data: Awaited<ReturnType<typeof getBlogs>> = { items: [], total: 0, page, pageSize: 12 };
|
|
try {
|
|
data = await getBlogs({ page, pageSize: 12 });
|
|
} catch {
|
|
data = { items: [], total: 0, page, pageSize: 12 };
|
|
}
|
|
const posts = data.items.map(mapBlog);
|
|
|
|
return (
|
|
<>
|
|
<PageHero title="وبلاگ سالار استور" english="Blog" />
|
|
<section className="container-site py-10 md:py-14">
|
|
{posts.length ? (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{posts.map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/blog/${post.slug}`}
|
|
className="overflow-hidden rounded-2xl border border-black/5 bg-white hover:border-brand/40"
|
|
>
|
|
<Media src={post.image} alt="" className="aspect-[16/10]" sizes="400px" />
|
|
<div className="p-4">
|
|
<time className="text-xs text-zinc-400">{post.date}</time>
|
|
<h2 className="mt-2 text-base font-bold leading-8 line-clamp-2">{post.title}</h2>
|
|
{post.abstract ? (
|
|
<p className="mt-1 text-sm leading-7 text-zinc-500 line-clamp-2">{post.abstract}</p>
|
|
) : null}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="py-16 text-center text-sm text-zinc-500">مقالهای یافت نشد.</p>
|
|
)}
|
|
<Pagination
|
|
page={data.page}
|
|
pageSize={data.pageSize}
|
|
total={data.total}
|
|
makeHref={(nextPage) => (nextPage > 1 ? `/blog?page=${nextPage}` : "/blog")}
|
|
/>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|