feat: Enhance specialty handling and navigation across doctor and specialty pages

2026-08-08 17:33:13 +03:30
parent 56e264e44c
commit 79747c443c
12 changed files with 435 additions and 27 deletions
@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { childSpecialties, parentSpecialty } from "@/lib/specialtyIndexing";
+
+const CHIP =
+  "px-[14px] py-[8px] rounded-lg bg-[#FFF] border border-[#EFEFEF] text-[14px] font-medium text-[#525252] hover:bg-[#5559CE] hover:text-[#FFF] hover:border-[#5559CE] transition-all duration-500";
+
+const CHIP_ACTIVE =
+  "px-[14px] py-[8px] rounded-lg bg-[#5559CE] border border-[#5559CE] text-[14px] font-medium text-[#FFF]";
+
+/**
+ * ناوبری والد/فرزندِ صفحهٔ تخصص.
+ *
+ * تا پیش از این، صفحهٔ «جراحی عمومی» هیچ نشانی از زیرشاخه‌هایش نداشت و صفحهٔ
+ * «جراح گوارش» راهی به گروهش. کاربر برای دیدن گروه باید URL دستکاری می‌کرد.
+ *
+ * روی صفحهٔ والد، «همه تخصص‌های X» حالت جاری است نه یک لینک دیگر: بک‌اند
+ * `specialty_id` را به همهٔ نوادگان گسترش می‌دهد، پس همین صفحه از قبل همهٔ پزشکان
+ * گروه را نشان می‌دهد. برچسبِ فعال همین را صریح می‌کند تا کاربر دنبال گزینه نگردد.
+ */
+function SpecialtyTree({ specialty }) {
+  const parent = parentSpecialty(specialty);
+  const siblingsOf = parent ?? specialty;
+  const children = childSpecialties(siblingsOf);
+
+  if (children.length === 0) return null;
+
+  const allHref = `/specialties/${siblingsOf.slug}`;
+  const isAllActive = !parent;
+
+  return (
+    <nav
+      aria-label={`زیرتخصص‌های ${siblingsOf.name}`}
+      className="mt-[20px] flex flex-wrap items-center gap-[8px]"
+    >
+      {isAllActive ? (
+        <span className={CHIP_ACTIVE} aria-current="page">
+          همه تخصص‌های {siblingsOf.name}
+        </span>
+      ) : (
+        <Link href={allHref} className={CHIP}>
+          همه تخصص‌های {siblingsOf.name}
+        </Link>
+      )}
+
+      {children.map((child) => {
+        const isActive = String(child.id) === String(specialty.id);
+
+        return isActive ? (
+          <span key={child.id} className={CHIP_ACTIVE} aria-current="page">
+            {child.name}
+          </span>
+        ) : (
+          <Link key={child.id} href={`/specialties/${child.slug}`} className={CHIP}>
+            {child.name}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+export default SpecialtyTree;