change design all page & component page booking and account & cleancode

2024-09-01 20:43:53 +03:30
parent 2afd79b84d
commit bb154ac63f
46 changed files with 685 additions and 523 deletions
@@ -0,0 +1,88 @@
+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="">
+            <ul className="flex flex-col items-start justify-start gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px]">
+                    <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                        <LocationA />
+                    </div>
+                    <p className="text-[#616161] text-[14px] md: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]">
+                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                            <CalendarA />
+                        </div>
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[14px] md: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-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                            <ArrowLeftOrangeA />
+                        </div>
+                    </Button>
+                </li>
+                <li className="flex items-center justify-between w-full">
+                    <div className="flex items-center justify-start gap-[4px]">
+                        <div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
+                            <ClockA />
+                        </div>
+                        <div className="flex items-center justify-start">
+                            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
+                            <p className="text-[#2F2F2F] text-[14px] md: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-[12px] md:!text-[14px] !font-normal">تغییر </p>
+                        <div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
+                            <ArrowLeftOrangeA />
+                        </div>
+                    </Button>
+                </li>
+            </ul>
+            <span
+                className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px] 
+                mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px] 
+                w-full h-px bg-[#D7D7D7] block"
+            ></span>
+            <ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
+                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+                    <div
+                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
+                    >
+                        <TickCircleOrange />
+                    </div>
+                    <p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
+                </li>
+                <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
+                    <div
+                        className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
+                        w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
+                    >
+                        <TickCircleOrange />
+                    </div>
+                    <p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default Detail
@@ -0,0 +1,29 @@
+import Image from "next/image"
+
+function Head({ doctor }) {
+    return (
+        <div className="
+            flex items-center justify-start 
+            gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px] 
+            mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
+            mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
+        ">
+            <Image
+                className="
+                    w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
+                    h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
+                "
+                alt="profile doctor"
+                src={doctor.img}
+                height={95}
+                width={95}
+            />
+            <div className="flex flex-col items-start justify-center gap-[8px] sm:gap-[12px] md:gap-[16px] lg:gap-[20px]">
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
+                <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,22 @@
+import Detail from "./Detail"
+import Head from "./Head"
+
+function Information({ doctor, typePay, isPay, disableSide }) {
+    return (
+        <div className={`w-full lg:w-[41%] relative ${disableSide ? 'hidden lg:flex' : ''}`}>
+            <div
+                className={`p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border 
+                    border-solid border-[#EFEFEF] bg-[#FFF] 
+                    top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
+                    ${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
+                `}
+            >
+                <p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
+                <Head doctor={doctor} />
+                <Detail doctor={doctor} />
+            </div>
+        </div>
+    )
+}
+
+export default Information