design page booking & add page loginverify

app/booking/[slug]/page.js

@@ -0,0 +1,18 @@
+import BookingPage from '@/components/booking';
+import Layout from '@/components/layout';
+import doctors from '@/data/doctors.json';
+
+function Booking({ params: { slug } }) {
+
+    const doctor = doctors.find(item => item.id === +slug);
+
+    return (
+        <Layout title='رزرو' name='booking'>
+            <BookingPage
+                doctor={doctor}
+            />
+        </Layout>
+    )
+}
+
+export default Booking

app/booking/index.js

@@ -1,12 +0,0 @@
-import BookingPage from '@/components/booking';
-import Layout from '@/components/layout';
-
-function Booking() {
-    return (
-        <Layout title='رزرو' name='about-us'>
-            <BookingPage />
-        </Layout>
-    )
-}
-
-export default Booking

app/component/date/datePicker/index.js

@@ -1,8 +1,7 @@
+'use client'
+
 import { useState } from 'react';
-import { Popover } from '@mui/material';
+import { DatePicker as DatePickerJalali, RangePicker } from "jalaali-react-date-picker";
-import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
-import Field from './Field';
-import ButtonDate from './ButtonDate';
 
 function DatePicker({ type, date, updateDate, text, from }) {
 
@@ -19,25 +18,14 @@ function DatePicker({ type, date, updateDate, text, from }) {
 
     return (
         <div>
-            {/* {from && from === 'register' ? (
+            <RangePicker
-                <Field
+                onChange={(e) => {
-                    title={text}
+                    // if (e._d) {
-                    handleClick={handleClick}
+                    //     updateDate(e._d, type)
-                />
+                    // }
-            ) : (
+                    // handleClose()
-                <ButtonDate
+                }}
-                    text={text}
+            />
-                    handleClick={handleClick}
-                />
-            )} */}
-            <DatePickerJalali
-                    onChange={(e) => {
-                        if (e._d) {
-                            updateDate(e._d, type)
-                        }
-                        handleClose()
-                    }}
-                />
         </div>
     )
 }

app/component/date/dateTime/Hours.js

@@ -0,0 +1,31 @@
+import { Button } from "@mui/material";
+
+function Hours({ doctor, hour, setHour, value, nameHours }) {
+    return (
+        <ul
+            className="grid grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+        >
+            {doctor[nameHours[value]].map((item, idx) => (
+                <li
+                    key={idx}
+                >
+                    <Button
+                        onClick={() => setHour(idx)}
+                        className={`
+                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px]
+                        ${idx === hour ? '!bg-[#F79463] ' : ''}
+                    `}
+                    >
+                        <p className={`
+                        text-[16px] font-semibold
+                        ${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
+                        ${idx === hour ? '!text-[#FAFAFA] ' : ''}
+                    `}>{item.hour}</p>
+                    </Button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Hours;

app/component/date/dateTime/TabsTime.js

@@ -1,7 +0,0 @@
-function TabsTime() {
-    return (
-        <div>TabsTime</div>
-    )
-}
-
-export default TabsTime;

app/component/date/dateTime/index.js

@@ -1,21 +1,45 @@
+'use client';
+
 import { useState } from "react";
-import Tabs from "../../Tabs"
+import Tabs from "../../Tabs";
+import Hours from "./Hours";
+import { Button } from "@mui/material";
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
 
 const listTab = ['صبح', 'بعد از ظهر'];
+const nameHours = ['hours_morning', 'hours_afternoon']
 
-function DateTime() {
+function DateTime({ doctor }) {
 
   const [value, setValue] = useState(0);
+  const [hour, setHour] = useState(0);
+
   const handleChange = (event, newValue) => setValue(newValue);
 
   return (
-    <div className="mx-[122px]">
+    <div className="w-full">
       <Tabs
         isSm={true}
         value={value}
         listTab={listTab}
         handleChange={handleChange}
       />
+      <Hours
+        hour={hour}
+        value={value}
+        doctor={doctor}
+        setHour={setHour}
+        nameHours={nameHours}
+      />
+      <div className="w-full flex justify-end">
+        <Button
+          className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
+          variant="contained"
+        >
+          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
+          <ArrowLeftB />
+        </Button>
+      </div>
     </div>
   )
 }

app/globals.css

@@ -385,4 +385,9 @@ html {
     display: none !important;
 }
 
+.day.hovered.today {
+    border: 1px solid #F79463;
+    border-radius: 50%;
+}
+
 /* End Date Picker Style */

app/login-verify/page.js

@@ -0,0 +1,13 @@
+import Layout from '@/components/layout'
+import LoginVerifyPage from '@/components/loginVerify'
+import React from 'react'
+
+function LoginVerify() {
+    return (
+        <Layout title='وبلاگ ها' name='blogs'>
+            <LoginVerifyPage />
+        </Layout>
+    )
+}
+
+export default 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() {
+import Date from "./date";
-    return (
+import Detail from "./detail";
-        <div>
 
+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>
     )
 }

components/doctor/appointmentList/ItemAppointment.js

@@ -2,6 +2,7 @@ import ArrowLeftD from '@/components/icons/ArrowLeftD'
 import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
 import { Button } from '@mui/material'
 import Image from 'next/image'
+import Link from 'next/link'
 import React from 'react'
 
 function ItemAppointment({ turn, doctor }) {
@@ -29,15 +30,17 @@ function ItemAppointment({ turn, doctor }) {
                     <GreenCalendarTurn />
                     <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
                 </div>
-                <Button
+                <Link href={`/booking/${turn.id}`}>
-                    variant='contained'
+                    <Button
-                    className='!py-2 !px-6 gap-1'
+                        variant='contained'
-                >
+                        className='!py-2 !px-6 gap-1'
-                    دریافت نوبت
+                    >
-                    <div className='w-[20px] h-[20px]'>
+                        دریافت نوبت
-                        <ArrowLeftD />
+                        <div className='w-[20px] h-[20px]'>
-                    </div>
+                            <ArrowLeftD />
-                </Button>
+                        </div>
+                    </Button>
+                </Link>
             </div>
         </li>
     )

components/doctor/appointmentList/index.js

@@ -1,28 +1,17 @@
 'use client';
 
-import { useState } from 'react';
-
 import turns from '@/data/turns.json';
-import ModalDatePicker from './modal';
 import { Button } from '@mui/material';
 import ItemAppointment from './ItemAppointment';
 import ArrowLeftD from '@/components/icons/ArrowLeftD';
+import Link from 'next/link';
 
 function AppointmentList({ doctor }) {
 
     const itemActive = turns[0];
 
-    const [open, setOpen] = useState(true);
-
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
-
     return (
         <>
-            <ModalDatePicker
-                open={open}
-                handleClose={handleClose}
-            />
             <ul className="hidden lg:flex w-[38%] flex-col justify-start items-center gap-8">
                 {turns.map(item => (
                     <ItemAppointment

components/icons/ArrowLeftB.js

@@ -0,0 +1,10 @@
+function ArrowLeftB() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M7.97435 4.94165L2.91602 9.99998L7.97435 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 ArrowLeftB

components/loginVerify/index.js

@@ -0,0 +1,7 @@
+function LoginVerifyPage() {
+    return (
+        <div>LoginVerifyPage</div>
+    )
+}
+
+export default LoginVerifyPage