Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/blog/page.tsx

@@ -3,35 +3,92 @@ import Link from "next/link";
 import { Container } from "@/components/Container";
 import { PageHero } from "@/components/layout/PageHero";
 import { Placeholder } from "@/components/Placeholder";
+import { blogHref, blogImage, fetchBlogs } from "@/lib/blog";
 import { blogPosts } from "@/lib/data";
+import { faDigits, formatFaDate } from "@/lib/format";
+
+export const revalidate = 60;
 
 export const metadata: Metadata = {
   title: "مقالات",
   description: "نکته‌هایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
 };
 
-export default function BlogPage() {
+export default async function BlogPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, Number(pageParam) || 1);
+  const result = await fetchBlogs({ page, pageSize: 12 });
+  const usingApi = result.items.length > 0;
+  const pageCount = usingApi
+    ? Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)))
+    : 1;
+
   return (
     <>
       <PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
       <section className="py-16 sm:py-24">
         <Container>
-          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {blogPosts.map((post) => (
-              <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
-                <div className="overflow-hidden rounded-2xl">
-                  <Placeholder
-                    src={post.image}
-                    alt={post.title}
-                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
-                  />
+          {usingApi ? (
+            <>
+              <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+                {result.items.map((post) => (
+                  <Link key={post.id} href={blogHref(post)} className="group block">
+                    <div className="overflow-hidden rounded-2xl">
+                      <Placeholder
+                        src={blogImage(post)}
+                        alt={post.title}
+                        className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                      />
+                    </div>
+                    <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
+                      {formatFaDate(post.publishedAt || post.createdAt)}
+                    </p>
+                    <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
+                    {post.abstract ? (
+                      <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.abstract}</p>
+                    ) : null}
+                  </Link>
+                ))}
+              </div>
+              {pageCount > 1 ? (
+                <div className="mt-10 flex justify-center gap-2">
+                  {Array.from({ length: pageCount }, (_, index) => {
+                    const number = index + 1;
+                    return (
+                      <Link
+                        key={number}
+                        href={`/blog?page=${number}`}
+                        className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
+                      >
+                        {faDigits(number)}
+                      </Link>
+                    );
+                  })}
                 </div>
-                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
-                <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
-                <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
-              </Link>
-            ))}
-          </div>
+              ) : null}
+            </>
+          ) : (
+            <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {blogPosts.map((post) => (
+                <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
+                  <div className="overflow-hidden rounded-2xl">
+                    <Placeholder
+                      src={post.image}
+                      alt={post.title}
+                      className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                    />
+                  </div>
+                  <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
+                  <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
+                  <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
+                </Link>
+              ))}
+            </div>
+          )}
         </Container>
       </section>
     </>