- Implemented search functionality to filter specialties by name - Added navigation to /doctors page with specialty ID as query parameter when clicking on a specialty card - Enhanced user experience by providing real-time search results and clear navigation path
32 lines
1.0 KiB
JavaScript
32 lines
1.0 KiB
JavaScript
import TextLoading from "@/app/component/loading/Text";
|
|
import React from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
function ItemSpecialties({ data, loading }) {
|
|
const router = useRouter();
|
|
|
|
const handleClick = () => {
|
|
router.push(`/doctors?specialties=${data.id}`);
|
|
};
|
|
|
|
return (
|
|
<li
|
|
onClick={handleClick}
|
|
className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px]
|
|
rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
|
hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality"
|
|
>
|
|
<TextLoading loading={loading} width={70} height={18}>
|
|
<p className="text-[#3B3B3B] text-[16px] font-bold">{data.name}</p>
|
|
</TextLoading>
|
|
<TextLoading loading={loading} width={50} height={18}>
|
|
<p className="text-[#7E7E7E] text-[14px] font-medium">
|
|
{data.number_of_doctors} پزشک
|
|
</p>
|
|
</TextLoading>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default ItemSpecialties;
|