add modal page item doctor and date picker basic style

app/booking/index.js

@@ -0,0 +1,12 @@
+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/Tabs.js

@@ -7,9 +7,7 @@ function a11yProps(index) {
     };
 };
 
-const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
-
-function Tabs({ value, handleChange }) {
+function Tabs({ value, handleChange, listTab, isSm }) {
     return (
         <Box
             className="!border-none"
@@ -22,8 +20,8 @@ function Tabs({ value, handleChange }) {
                         overflow: 'auto !important'
                     },
                     '.MuiTabs-indicator': {
-                        height: '2px',
-                        borderRadius: '10px',
+                        height: isSm ? '4px' : '2px',
+                        borderRadius: isSm ? '8px' : '10px',
                         background: '#F17732'
                     },
                     '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
@@ -36,7 +34,10 @@ function Tabs({ value, handleChange }) {
                         key={idx}
                         label={item}
                         {...a11yProps(idx)}
-                        className="text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold !mr-2"
+                        className={`
+                            text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold
+                            ${isSm ? '!w-1/2 !m-0' : '!mr-2'}
+                        `}
                     />
                 ))}
             </TabsMUI>

app/component/date/datePicker/index.js

@@ -18,7 +18,7 @@ function DatePicker({ type, date, updateDate, text, from }) {
     const id = open ? 'simple-popover' : undefined;
 
     return (
-        <div className='min-w-[700px] min-h-[700px]'>
+        <div>
             {/* {from && from === 'register' ? (
                 <Field
                     title={text}

app/component/date/dateTime/TabsTime.js

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

app/component/date/dateTime/index.js

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import Tabs from "../../Tabs"
+
+const listTab = ['صبح', 'بعد از ظهر'];
+
+function DateTime() {
+
+  const [value, setValue] = useState(0);
+  const handleChange = (event, newValue) => setValue(newValue);
+
+  return (
+    <div className="mx-[122px]">
+      <Tabs
+        isSm={true}
+        value={value}
+        listTab={listTab}
+        handleChange={handleChange}
+      />
+    </div>
+  )
+}
+
+export default DateTime

components/booking/index.js

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

components/clinic/index.js

@@ -1,11 +1,12 @@
 'use client';
 import { useState } from 'react';
 
-import Tabs from "./Tabs";
 import About from './components/about';
 import Contact from './components/contact';
 import Doctors from './components/doctors';
+import Tabs from '@/app/component/Tabs';
 
+const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
 
 function ClinicPage({ data, doctors }) {
 
@@ -22,6 +23,7 @@ function ClinicPage({ data, doctors }) {
     <div className="pt-[40px] sm:pt-[70px] md:pt-[100px] lg:pt-[136px] mt-[40px] padding-responsive">
       <Tabs
         value={value}
+        listTab={listTab}
         handleChange={handleChange}
       />
       <div className='mt-[24px] sm:mt-[27px] md:mt-[30px] lg:mt-[32px]'>

components/doctor/appointmentList/modal/index.js

@@ -1,6 +1,8 @@
 import { Box, Modal } from "@mui/material"
 import { styleDefault } from "@/mui"
-import DatePicker from "@/app/component/datePicker"
+import DatePicker from "@/app/component/date/datePicker"
+import CloseModalD from "@/components/icons/CloseModalD"
+import DateTime from "@/app/component/date/dateTime"
 
 function ModalDatePicker({ open, handleClose }) {
     return (
@@ -8,8 +10,25 @@ function ModalDatePicker({ open, handleClose }) {
             open={open}
             onClose={handleClose}
         >
-            <Box sx={styleDefault}>
-                <DatePicker />
+            <Box sx={styleDefault} className="!py-[24px] !px-[40px]">
+                <div className="flex justify-between items-center">
+                    <span></span>
+                    <p className="text-[#3B3B3B] text-[20px] font-medium">دریافت نوبت از دکتر مهران امینی</p>
+                    <div className="cursor-pointer" onClick={handleClose}>
+                        <CloseModalD />
+                    </div>
+                </div>
+                <div className="flex flex-col items-start justify-start gap-[16px] mt-[24px]">
+                    <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب روز</p>
+                    <div className="py-[24px] px-[32px] border border-solid border-[#E9ECEF] rounded-[16px] bg-[#FFF] flex items-center">
+                        <DatePicker />
+                        <DatePicker />
+                    </div>
+                </div>
+                <div className="mt-[24px]">
+                    <p className="text-[#3B3B3B] text-[20px] font-bold">انتخاب ساعت</p>
+                    <DateTime />
+                </div>
             </Box>
         </Modal>
     )