From 05fef12db31be32aaa1848e0fc315259202bd07e Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Thu, 27 Jun 2024 15:34:52 +0330
Subject: [PATCH] list all doctors

---
 components/doctors/listDoctors/ItemDoctor.js | 47 ++++++++++++++++++--
 components/doctors/listDoctors/index.js      |  2 +-
 components/icons/ArrowLeftD.js               | 10 +++++
 components/icons/ClockD.js                   | 10 +++++
 components/icons/PointD.js                   |  9 ++++
 5 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 components/icons/ArrowLeftD.js
 create mode 100644 components/icons/ClockD.js
 create mode 100644 components/icons/PointD.js

diff --git a/components/doctors/listDoctors/ItemDoctor.js b/components/doctors/listDoctors/ItemDoctor.js
index 9a9856b..e28b5b3 100644
--- a/components/doctors/listDoctors/ItemDoctor.js
+++ b/components/doctors/listDoctors/ItemDoctor.js
@@ -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>
     )
 }
diff --git a/components/doctors/listDoctors/index.js b/components/doctors/listDoctors/index.js
index 823039e..974641d 100644
--- a/components/doctors/listDoctors/index.js
+++ b/components/doctors/listDoctors/index.js
@@ -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}
diff --git a/components/icons/ArrowLeftD.js b/components/icons/ArrowLeftD.js
new file mode 100644
index 0000000..aacb68d
--- /dev/null
+++ b/components/icons/ArrowLeftD.js
@@ -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
\ No newline at end of file
diff --git a/components/icons/ClockD.js b/components/icons/ClockD.js
new file mode 100644
index 0000000..1474cc3
--- /dev/null
+++ b/components/icons/ClockD.js
@@ -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
\ No newline at end of file
diff --git a/components/icons/PointD.js b/components/icons/PointD.js
new file mode 100644
index 0000000..1a86bf5
--- /dev/null
+++ b/components/icons/PointD.js
@@ -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
\ No newline at end of file