change date-picker & add page login-verify & account & new user & payment

components/account/detailDoctor/Detail.js

@@ -0,0 +1,64 @@
+import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA"
+import CalendarA from "@/components/icons/CalendarA"
+import ClockA from "@/components/icons/ClockA"
+import LocationA from "@/components/icons/LocationA"
+import TickCircleOrange from "@/components/icons/TickCircleOrange"
+import { Button } from "@mui/material"
+
+function Detail({ doctor }) {
+    return (
+        <div className="mt-[8px]">
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px]">
+                    <LocationA />
+                    <p className="text-[#616161] text-[16px] font-normal">آدرس: {doctor.location}</p>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <CalendarA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">تاریخ نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">13 خرداد 1403</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <ClockA />
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[16px] font-medium">زمان نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[16px] font-medium mr-1">ساعت 17:20</p>
+                        </div>
+                    </div>
+                    <Button
+                        className="!p-1 !flex !items-center !justify-end !gap-[2px]"
+                        variant="text"
+                    >
+                        <p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
+                        <ArrowLeftOrangeA />
+                    </Button>
+                </li>
+            </ul>
+            <span className="mt-[28px] mb-[24px] w-full h-px bg-[#D7D7D7] block"></span>
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+                </li>
+                <li className="flex items-center justify-start gap-[8px]">
+                    <TickCircleOrange />
+                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default Detail

components/account/detailDoctor/Head.js

@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[16px] my-[24px]">
+            <Image
+                alt="profile doctor"
+                src={doctor.img}
+                height={95}
+                width={95}
+            />
+            <div className="flex flex-col items-start justify-center gap-[20px]">
+                <p className="text-[#3B3B3B] text-[20px] font-medium">{doctor.name}</p>
+                <p className="text-[#616161] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head

components/account/detailDoctor/index.js

@@ -0,0 +1,14 @@
+import Detail from "./Detail"
+import Head from "./Head"
+
+function DetailDoctor({ doctor }) {
+    return (
+        <div className="p-[24px] w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+            <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
+            <Head doctor={doctor} />
+            <Detail doctor={doctor} />
+        </div>
+    )
+}
+
+export default DetailDoctor