63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
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;
|