design page booking & add page loginverify

components/booking/date/PlaceVisit.js

@@ -0,0 +1,30 @@
+'use client';
+
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
+import { useState } from "react";
+
+function PlaceVisit() {
+
+    const clinics = [
+        { label: 'درمانگاه رازی', id: 10 },
+        { label: 'درمانگاه ابوعلی', id: 20 },
+        { label: 'درمانگاه مرکزی', id: 30 }
+    ];
+
+    const [locateVisit, setLocateVisit] = useState();
+
+    const updateData = event => setLocateVisit(event.target.innerText);
+
+    return (
+        <div className="flex flex-col items-start gap-[19px] justify-start">
+            <p className="text-[#3B3B3B] text-[16px] font-bold">1. انتخاب محل ویزیت</p>
+            <AutoCompleteSelect
+                updateData={updateData}
+                label='درمانگاه'
+                list={clinics}
+            />
+        </div>
+    )
+}
+
+export default PlaceVisit

components/booking/date/Time/SelectDatePicker.js

@@ -0,0 +1,11 @@
+import DatePicker from "@/app/component/date/datePicker"
+
+function SelectDatePicker() {
+    return (
+        <div>
+            <DatePicker />
+        </div>
+    )
+}
+
+export default SelectDatePicker

components/booking/date/Time/index.js

@@ -0,0 +1,12 @@
+import SelectDatePicker from "./SelectDatePicker"
+
+function Time() {
+    return (
+        <div className="flex mt-[24px] flex-col items-start gap-[19px] justify-start">
+            <p className="text-[#3B3B3B] text-[16px] font-bold">2. انتخاب روز</p>
+            <SelectDatePicker />
+        </div>
+    )
+}
+
+export default Time

components/booking/date/hour/index.js

@@ -0,0 +1,14 @@
+import DateTime from "@/app/component/date/dateTime"
+
+function Hour({ doctor }) {
+    return (
+        <div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
+            <p className="text-[#3B3B3B] text-[16px] font-bold">3. انتخاب ساعت</p>
+            <DateTime
+                doctor={doctor}
+            />
+        </div>
+    )
+}
+
+export default Hour

components/booking/date/index.js

@@ -0,0 +1,15 @@
+import Hour from "./hour"
+import PlaceVisit from "./PlaceVisit"
+import Time from "./Time"
+
+function Date({ doctor }) {
+    return (
+        <div className="p-[24px] w-[61%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
+            <PlaceVisit />
+            <Time />
+            <Hour doctor={doctor} />
+        </div>
+    )
+}
+
+export default Date

components/booking/detail/Address.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+function Address({ doctor }) {
+    return (
+        <ul className='mt-[4px] flex flex-col'>
+            {doctor.address.map((item, idx) => (
+                <li
+                    key={idx}
+                >
+                    <div className='flex py-[12px] text-[#616161] text-[14px] items-center justify-start'>
+                        <p className='font-bold'>{`${item.name}: `}</p>
+                        <p className='font-normal'>{item.location}</p>
+                    </div>
+                    {doctor.address.length > idx + 1 && (
+                        <span className='bg-[#EFEFEF] block h-px w-full'></span>
+                    )}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Address

components/booking/detail/Head.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import React from 'react'
+
+function Head({ doctor }) {
+    return (
+        <div className="flex items-center justify-start gap-[12px]">
+            <Image
+                src={doctor.img}
+                alt="profile"
+                height={56}
+                width={56}
+            />
+            <div className="flex flex-col items-center justify-start gap-[8px]">
+                <p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
+                <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Head

components/booking/detail/index.js

@@ -0,0 +1,18 @@
+import Address from "./Address";
+import Head from "./Head";
+
+function Detail({ doctor }) {
+    return (
+        <div className="h-screen w-[39%]">
+            <div
+                className="p-[16px] sticky rounded-[8px] bg-[#FFF] border border-solid border-[#EFEFEF]
+                top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
+            >
+                <Head doctor={doctor} />
+                <Address doctor={doctor} />
+            </div>
+        </div>
+    )
+}
+
+export default Detail

components/booking/index.js

@@ -1,7 +1,13 @@
-function BookingPage() {
-    return (
-        <div>
+import Date from "./date";
+import Detail from "./detail";
 
+function BookingPage({ doctor }) {
+    return (
+        <div
+            className="flex justify-center gap-[24px] padding-responsive
+            items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
+            <Detail doctor={doctor} />
+            <Date doctor={doctor} />
         </div>
     )
 }