responsive page doctor item & page booking

This commit is contained in:
Ehsan
2024-08-29 03:18:01 +03:30
parent 6384dd10b6
commit 707206450c
10 changed files with 96 additions and 52 deletions
+18 -12
View File
@@ -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>