feat: Refactor specialty display logic and enhance specialty filtering

- Introduced SpecialtyChips component to manage the display of doctor's specialties with a primary specialty and a count of additional specialties. - Updated ItemDoctor component to utilize SpecialtyChips for better UI presentation. - Enhanced PosterLight and Poster components to display primary specialties and a text line for sub-specialties. - Implemented nextSpecialtyFilter function to improve specialty selection logic in the Content component. - Updated search functionality to allow searching by both doctor name and specialty. - Added new specialties to specialties.json for better coverage. - Created sync-specialties script to synchronize specialties data with the backend during build. - Added tests for new components and helper functions to ensure functionality and reliability.
2026-08-08 17:19:22 +03:30
parent 94c22de8dd
commit 56e264e44c
16 changed files with 799 additions and 52 deletions
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { Popover } from "@mui/material";
+import { splitSpecialties } from "@/lib/specialtyDisplay";
+
+/**
+ * تخصص اصلی + شمارندهٔ بقیه در کارت پزشک.
+ *
+ * پیش از این همهٔ نام‌ها پشت‌سرهم چاپ می‌شدند و کارتِ پزشکِ شش‌تخصصی در موبایل
+ * چند برابر بقیه بلند می‌شد و شبکه را به‌هم می‌ریخت.
+ *
+ * جدا از ItemDoctor است تا مرز client فقط همین‌جا باشد؛ کارت از کامپوننت‌های
+ * سروری هم رندر می‌شود.
+ */
+function SpecialtyChips({ specialties }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { primary, rest } = splitSpecialties(specialties);
+
+  if (!primary) return null;
+
+  const open = Boolean(anchorEl);
+
+  // کارت داخل <Link> است؛ بدون این دو، هر کلیک روی شمارنده صفحهٔ پزشک را باز می‌کند.
+  const handleOpen = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (event) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    setAnchorEl(null);
+  };
+
+  return (
+    <span className="flex items-center gap-1.5 min-w-0">
+      <span className="text-[#616161] text-[14px] font-normal truncate">
+        تخصص: {primary.name}
+      </span>
+
+      {rest.length > 0 && (
+        <>
+          <button
+            type="button"
+            onClick={handleOpen}
+            aria-label={`نمایش ${rest.length} تخصص دیگر`}
+            className="shrink-0 p-1 bg-[#F8F8FF] rounded-[4px] text-[#616161] text-[12px] font-medium leading-none"
+          >
+            +{rest.length}
+          </button>
+
+          <Popover
+            open={open}
+            anchorEl={anchorEl}
+            onClose={handleClose}
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            transformOrigin={{ vertical: "top", horizontal: "right" }}
+          >
+            <ul
+              dir="rtl"
+              className="p-3 flex flex-col gap-1.5 max-w-[260px] bg-[#FFF]"
+            >
+              {[primary, ...rest].map((item) => (
+                <li
+                  key={item.id ?? item.name}
+                  className="text-[#616161] text-[13px] font-normal"
+                >
+                  {item.name}
+                </li>
+              ))}
+            </ul>
+          </Popover>
+        </>
+      )}
+    </span>
+  );
+}
+
+export default SpecialtyChips;