responsive page doctor item & page booking
This commit is contained in:
@@ -5,31 +5,37 @@ import Image from "next/image"
|
||||
|
||||
function Title({ doctor }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-8">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
|
||||
<Image
|
||||
className="
|
||||
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
|
||||
h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
|
||||
"
|
||||
src={doctor.img}
|
||||
width={164}
|
||||
height={164}
|
||||
alt="img-doctor"
|
||||
height={164}
|
||||
width={164}
|
||||
/>
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold">{doctor.name}</p>
|
||||
<p className="text-[#525252] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
|
||||
<div className="flex items-center justify-start gap-11">
|
||||
<p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<TickCircle />
|
||||
<p className="text-[#525252] text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
|
||||
<div className="hidden lg:flex">
|
||||
<TickCircle />
|
||||
</div>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<div className="flex p-1 gap-0.5 items-center justify-center">
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[14px] font-normal">امتیاز: {doctor.point}</p>
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-center gap-0.5">
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user