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>
2026-08-21 16:04:31 +03:30
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { customerPortalUrl } from "@/lib/config";
+import { formatFaDate } from "@/lib/format";
+import type { CommentItem } from "@/lib/comments";
+
+export function ProductTabs({
+  descriptionHtml,
+  comments,
+  showDescription = true,
+}: {
+  descriptionHtml?: string | null;
+  comments: CommentItem[];
+  showDescription?: boolean;
+}) {
+  const [tab, setTab] = useState<"description" | "comments">(showDescription ? "description" : "comments");
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    setToken(
+      window.localStorage.getItem("accessToken") ||
+        window.localStorage.getItem("meshkeeToken") ||
+        window.localStorage.getItem("token"),
+    );
+  }, []);
+
+  return (
+    <section className="mt-10 rounded-2xl border border-line bg-white p-5 sm:p-7">
+      {showDescription ? (
+        <div className="flex gap-2 border-b border-line pb-3">
+          <button
+            type="button"
+            onClick={() => setTab("description")}
+            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "description" ? "bg-paper text-ink" : "text-muted"}`}
+          >
+            توضیحات
+          </button>
+          <button
+            type="button"
+            onClick={() => setTab("comments")}
+            className={`rounded-lg px-4 py-2 text-[13px] font-medium ${tab === "comments" ? "bg-paper text-ink" : "text-muted"}`}
+          >
+            نظرات
+          </button>
+        </div>
+      ) : (
+        <h2 className="text-[16px] font-bold text-ink">نظرات</h2>
+      )}
+
+      {tab === "description" ? (
+        descriptionHtml ? (
+          <div className="rich-text mt-5 text-[14px] leading-8 text-ink" dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+        ) : (
+          <p className="mt-5 text-[13px] text-muted">توضیحاتی برای این محصول ثبت نشده است.</p>
+        )
+      ) : (
+        <div className="mt-5 space-y-4">
+          {comments.length === 0 ? (
+            <p className="text-[13px] text-muted">نظری ثبت نشده است.</p>
+          ) : (
+            comments.map((comment, index) => (
+              <article key={comment.id ?? index} className="rounded-xl bg-paper p-4">
+                <p className="text-[13px] font-bold text-ink">{comment.authorName || "کاربر"}</p>
+                {comment.createdAt ? <p className="mt-1 text-[11px] text-muted">{formatFaDate(comment.createdAt)}</p> : null}
+                <p className="mt-2 text-[13px] leading-7 text-ink">{comment.text}</p>
+              </article>
+            ))
+          )}
+
+          {token ? (
+            <p className="text-[13px] text-muted">برای مدیریت نظرات از حساب کاربری خود استفاده کنید.</p>
+          ) : (
+            <div className="rounded-2xl bg-paper p-5">
+              <p className="text-[14px] font-bold text-ink">برای ثبت نظر وارد شوید</p>
+              <p className="mt-1 text-[13px] text-muted">نظرات فقط برای کاربران واردشده فعال است.</p>
+              <a
+                href={customerPortalUrl}
+                className="mt-4 inline-flex h-11 items-center rounded-xl bg-brand px-5 text-[13px] font-bold text-white hover:bg-brand-dark"
+              >
+                ورود / ثبت‌نام
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}