page doctor detail

2024-07-06 21:46:11 +03:30
parent 855f31eed8
commit 7315167325
12 changed files with 379 additions and 5 deletions
@@ -0,0 +1,43 @@
+'use client';
+import { Button } from "@mui/material";
+import { useState } from "react"
+
+const listLink = [
+    { name: 'درباره پزشک', link: 'about-doctor' },
+    { name: 'موقعیت مکانی ', link: 'location' },
+    { name: 'نظرات', link: 'comments' },
+]
+
+function Link() {
+
+    const [activeId, setActiveId] = useState(0);
+
+    return (
+        <ul className="flex items-center justify-start mt-[56px] mb-[32px]">
+            {listLink.map((item, idx) => (
+                <li
+                    key={idx}
+                    className={`
+
+                    `}
+                >
+                    <a href={`#${item.link}`}>
+                        <Button
+                            className={`
+                        !text-[20px] !font-bold !mx-[56px] !py-px
+                        ${idx !== 0 && idx !== listLink.length - 1 ?
+                                    'relative before:absolute before:right-[-56px] before:top-0 before:h-full before:w-px before:bg-[#BABABA] after:absolute after:left-[-56px] after:top-0 after:h-full after:w-px after:bg-[#BABABA]'
+                                    : ''}
+                        ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
+                        `}
+                            variant="text">
+                            {item.name}
+                        </Button>
+                    </a>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Link
@@ -0,0 +1,18 @@
+import ShareDI from "@/components/icons/ShareDI"
+import { Button } from "@mui/material"
+
+function Share() {
+    return (
+        <div className="w-full text-left">
+            <Button
+                className="!gap-1 !p-2 !rounded-lg !text-[#525252] !text-[14px]"
+                variant="text"
+            >
+                <ShareDI />
+                اشتراک گذاری
+            </Button>
+        </div>
+    )
+}
+
+export default Share
@@ -0,0 +1,40 @@
+import LikeDI from "@/components/icons/LikeDI"
+import StarDI from "@/components/icons/StarDI"
+import TickCircle from "@/components/icons/TickCircle"
+import Image from "next/image"
+
+function Title({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-8">
+            <Image
+                src={doctor.img}
+                width={164}
+                height={164}
+                alt="img-doctor"
+            />
+            <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 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>
+                </div>
+                <div className="flex items-center justify-start gap-2">
+                    <div className="flex p-1 gap-0.5 items-center justify-center">
+                        <StarDI />
+                        <p className="text-[#616161] text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                    </div>
+                    <div className="flex p-1 items-center gap-0.5">
+                        <LikeDI />
+                        <p className="text-[#616161] text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Title
@@ -0,0 +1,20 @@
+function AboutDcotor({ doctor }) {
+    return (
+        <div>
+            <p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
+            <div className="my-2">
+                <p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
+                <ul className="flex items-center justify-start gap-4">
+                    {doctor.specialties.map((item, idx) => (
+                        <li className="flex items-center justify-start gap-1">
+                            <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
+                            <p className="text-[#616161] text-[16px] font-normal">{item}</p>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default AboutDcotor
@@ -0,0 +1,11 @@
+function LocationDoctor() {
+    return (
+        <div>
+            <div className="my-8">
+                <p className="text-[#525252] text-[20px] font-bold">موقعیت مکانی </p>
+            </div>
+        </div>
+    )
+}
+
+export default LocationDoctor
@@ -1,6 +1,18 @@
-function DetailDoctor() {
+import Link from "./Link"
+import Share from "./Share"
+import Title from "./Title"
+import AboutDcotor from "./cards/AboutDcotor"
+import LocationDoctor from "./cards/LocationDoctor"
+
+function DetailDoctor({ doctor }) {
    return (
-        <div className="w-[57%]">DetailDoctor</div>
+        <div className="w-[57%]">
+            <Share />
+            <Title doctor={doctor} />
+            <Link />
+            <AboutDcotor doctor={doctor} />
+            <LocationDoctor />
+        </div>
    )
 }

@@ -9,11 +9,11 @@ function DoctorPage({ doctor }) {
                <p className="text-[#525252] mr-1">{doctor.name}</p>
            </div>
            <div className="flex items-start justify-center gap-6 mt-[30px]">
-                <DetailDoctor />
-                <AppointmentList />
+                <DetailDoctor doctor={doctor} />
+                <AppointmentList doctor={doctor} />
            </div>
        </div>
    )
 }

-export default DoctorPage
+export default DoctorPage;