hamed
56e264e44c
- 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.
82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
"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;
|