list all doctors

2024-06-27 15:34:52 +03:30
parent b22b29b7b5
commit 05fef12db3
5 changed files with 73 additions and 5 deletions
@@ -1,9 +1,16 @@
-import LikeD from "@/components/icons/LikeD"
 import Image from "next/image"
+import { Button } from "@mui/material"
+
+// Icons
+import ArrowLeftD from "@/components/icons/ArrowLeftD"
+import ClockD from "@/components/icons/ClockD"
+import LikeD from "@/components/icons/LikeD"
+import PointD from "@/components/icons/PointD"

 function ItemDoctor({ doctor }) {
    return (
-        <li className="p-4 rounded-lg bg-[#FFF] border border-[#EFEFEF]">
+        <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
+            {/* Detail Doctor */}
            <div className="flex items-center justify-start gap-2.5">
                <Image
                    width={72}
@@ -15,14 +22,46 @@ function ItemDoctor({ doctor }) {
                <div className="flex flex-col items-start justify-center gap-2">
                    <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
                    <p className="text-[#616161] text-[14px] font-normal">تخصص: {doctor.expertise}</p>
-                    <div className="flex bg-[#F8F8FF] rounded-[4px] items-center justify-start gap-2">
-                        <div className="p-1 flex items-center gap-0.5">
+                    <div className="flex rounded items-center justify-start gap-2">
+                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                            <LikeD />
                            <p className="text-[#616161] text-[12px] font-normal">{doctor.satisfaction}%</p>
                        </div>
+                        <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
+                            <PointD />
+                            <p className="text-[#616161] text-[12px] font-normal">{doctor.point}</p>
+                        </div>
                    </div>
                </div>
            </div>
+
+            {/* Hours of work */}
+            <div className="flex my-4 items-center justify-start gap-0.5">
+                <ClockD />
+                <p className="text-[#7E7E7E] text-[12px] font-normal">ساعت کاری: {doctor.hours_of_work}</p>
+            </div>
+            <p
+                className={`text-[12px] font-medium rounded w-fit p-1.5
+                    ${doctor.free_turn ?
+                        'bg-[rgba(5,_186,_88,_0.04)] text-[#05BA58]' :
+                        'bg-[rgba(211,_47,_47,_0.04)] text-[#D32F2F]'
+                    }`}
+            >{doctor.free_turn ?
+                `اولین نوبت آزاد: ${doctor.free_turn}` :
+                'نوبت ندارد'
+                }</p>
+
+            {/* Arrow */}
+            <Button
+                className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
+                    ${doctor.free_turn ?
+                        '!bg-[#5559CE]' :
+                        '!bg-[#D7D7D7]'
+                    }`}
+                disabled={!doctor.free_turn}
+            >
+                <ArrowLeftD />
+            </Button>
        </li>
    )
 }
@@ -8,7 +8,7 @@ function ListDoctors() {

    return (
        <div>
-            <ul className="grid mt-[64px] gap-[24px]">
+            <ul className="grid grid-cols-3 mt-[64px] gap-[24px]">
                {doctors.map(doctor => (
                    <ItemDoctor
                        key={doctor.id}
@@ -0,0 +1,10 @@
+function ArrowLeftD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.97533 4.94167L2.91699 10L7.97533 15.0583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.0836 10H3.05859" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ArrowLeftD
@@ -0,0 +1,10 @@
+function ClockD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M18.3337 10C18.3337 14.6 14.6003 18.3333 10.0003 18.3333C5.40033 18.3333 1.66699 14.6 1.66699 10C1.66699 5.4 5.40033 1.66666 10.0003 1.66666C14.6003 1.66666 18.3337 5.4 18.3337 10Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.0914 12.65L10.5081 11.1083C10.0581 10.8417 9.69141 10.2 9.69141 9.675V6.25833" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ClockD
@@ -0,0 +1,9 @@
+function PointD() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M8.27549 11.9187L11.4255 13.9187C11.8317 14.175 12.3317 13.7937 12.213 13.325L11.3005 9.7375C11.2758 9.63806 11.2797 9.53367 11.3118 9.43636C11.3439 9.33906 11.4028 9.25279 11.4817 9.1875L14.3067 6.83125C14.6755 6.525 14.488 5.90625 14.0067 5.875L10.3192 5.6375C10.2186 5.63165 10.1219 5.59661 10.0409 5.53667C9.95984 5.47674 9.89803 5.3945 9.86299 5.3L8.48799 1.8375C8.45159 1.73744 8.38528 1.651 8.29807 1.58992C8.21086 1.52884 8.10696 1.49608 8.00049 1.49608C7.89401 1.49608 7.79012 1.52884 7.7029 1.58992C7.61569 1.651 7.54938 1.73744 7.51299 1.8375L6.13799 5.3C6.10294 5.3945 6.04113 5.47674 5.96011 5.53667C5.87908 5.59661 5.78235 5.63165 5.68174 5.6375L1.99424 5.875C1.51299 5.90625 1.32549 6.525 1.69424 6.83125L4.51924 9.1875C4.5982 9.25279 4.6571 9.33906 4.68917 9.43636C4.72124 9.53367 4.72516 9.63806 4.70049 9.7375L3.85674 13.0625C3.71299 13.625 4.31299 14.0812 4.79424 13.775L7.72549 11.9187C7.80768 11.8665 7.90308 11.8387 8.00049 11.8387C8.0979 11.8387 8.19329 11.8665 8.27549 11.9187Z" fill="#E7A801" />
+        </svg>
+    )
+}
+
+export default PointD