create

2026-08-19 17:54:11 +03:30
parent b065fac757
commit 149b77f734
80 changed files with 3015 additions and 92 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import type { EntityComment, TechnicalInfoValue } from "@/lib/types";
+
+type Tab = "description" | "technical" | "reviews";
+
+export default function ProductInfoTabs({
+  title,
+  descriptionHtml,
+  technicalValues,
+  comments,
+}: {
+  title: string;
+  descriptionHtml?: string;
+  technicalValues: TechnicalInfoValue[];
+  comments: EntityComment[];
+}) {
+  const [tab, setTab] = useState<Tab>("description");
+
+  const tabs: { key: Tab; label: string }[] = [
+    { key: "description", label: "توضیحات" },
+    { key: "technical", label: "مشخصات فنی" },
+    { key: "reviews", label: `دیدگاه کاربران${comments.length > 0 ? ` (${comments.length})` : ""}` },
+  ];
+
+  return (
+    <div className="mt-14 md:mt-20">
+      <div className="flex flex-wrap gap-2 border-b border-line pb-px">
+        {tabs.map((t) => (
+          <button
+            key={t.key}
+            type="button"
+            onClick={() => setTab(t.key)}
+            className={`rounded-t-lg px-5 h-11 text-sm font-bold transition-colors border-b-2 -mb-px ${
+              tab === t.key
+                ? "border-brand text-brand"
+                : "border-transparent text-body hover:text-ink"
+            }`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="pt-8">
+        {tab === "description" && (
+          <div>
+            <h2 className="text-lg md:text-xl font-extrabold text-ink mb-4">معرفی {title}</h2>
+            {descriptionHtml ? (
+              <div
+                className="rich-text text-body leading-8"
+                dangerouslySetInnerHTML={{ __html: descriptionHtml }}
+              />
+            ) : (
+              <p className="text-sm text-body">توضیحی برای این محصول ثبت نشده است.</p>
+            )}
+          </div>
+        )}
+
+        {tab === "technical" && (
+          <div>
+            {technicalValues.length > 0 ? (
+              <dl className="divide-y divide-line rounded-xl border border-line overflow-hidden">
+                {technicalValues.map((v, i) => (
+                  <div key={i} className="flex justify-between gap-4 px-4 py-3 text-sm odd:bg-surface">
+                    <dt className="text-body">{v.labelFa || v.label || v.key}</dt>
+                    <dd className="font-bold text-ink">{v.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            ) : (
+              <p className="text-sm text-body">مشخصات فنی این محصول ثبت نشده است.</p>
+            )}
+          </div>
+        )}
+
+        {tab === "reviews" && (
+          <div>
+            {comments.length > 0 ? (
+              <ul className="space-y-4">
+                {comments.map((c) => (
+                  <li key={c.id} className="rounded-xl border border-line p-4">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-bold text-ink">{c.authorName || "کاربر"}</span>
+                      {c.createdAt && (
+                        <span className="font-en text-xs text-body/60">{c.createdAt.slice(0, 10)}</span>
+                      )}
+                    </div>
+                    {c.text && <p className="mt-2 text-sm text-body leading-7">{c.text}</p>}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-body">
+                هنوز دیدگاهی برای این محصول ثبت نشده است.
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}