Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

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

app/blog/[slug]/page.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Media } from "@/components/Media";
+import { PageHero } from "@/components/PageHero";
+import { RichContent } from "@/components/RichContent";
+import { getBlog } from "@/lib/api";
+import { formatDate } from "@/lib/format";
+import { PLACEHOLDER } from "@/lib/data";
+import { SITE } from "@/lib/site";
+
+type Props = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  try {
+    const blog = await getBlog(slug);
+    if (!blog) return { title: SITE.nameFa };
+    return {
+      title: `${blog.title} | ${SITE.nameFa}`,
+      description: blog.abstract || SITE.aboutShort,
+    };
+  } catch {
+    return { title: SITE.nameFa };
+  }
+}
+
+export default async function BlogDetailPage({ params }: Props) {
+  const { slug } = await params;
+  const blog = await getBlog(slug);
+  if (!blog) notFound();
+
+  const author = [blog.author?.firstName, blog.author?.lastName].filter(Boolean).join(" ");
+
+  return (
+    <>
+      <PageHero
+        title={blog.title}
+        english="Blog"
+        crumbs={[{ name: "وبلاگ", href: "/blog" }, { name: blog.title }]}
+      />
+      <article className="container-site py-10 md:py-14">
+        <Media
+          src={blog.titleImageUrl || PLACEHOLDER.blog}
+          alt={blog.title}
+          className="aspect-[16/7] rounded-2xl"
+          sizes="1200px"
+          priority
+        />
+        <div className="mt-6 flex flex-wrap gap-3 text-sm text-zinc-400">
+          {blog.publishedAt || blog.createdAt ? <time>{formatDate(blog.publishedAt || blog.createdAt || "")}</time> : null}
+          {blog.categoryName ? <span>{blog.categoryName}</span> : null}
+          {author ? <span>{author}</span> : null}
+        </div>
+        {blog.abstract ? <p className="mt-4 text-zinc-600 leading-8">{blog.abstract}</p> : null}
+        <div className="mt-8">
+          <RichContent html={blog.mainTextHtml} />
+        </div>
+      </article>
+    </>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,65 @@
+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>
+    </>
+  );
+}