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