add modal page item doctor and date picker basic style

components/booking/index.js

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

components/clinic/Tabs.js

@@ -1,47 +0,0 @@
-import { Box, Tab, Tabs as TabsMUI } from '@mui/material';
-
-function a11yProps(index) {
-    return {
-        id: `simple-tab-${index}`,
-        'aria-controls': `simple-tabpanel-${index}`,
-    };
-};
-
-const listTab = ['درباره کلینیک', 'اطلاعات تماس', 'پزشک ها'];
-
-function Tabs({ value, handleChange }) {
-    return (
-        <Box
-            className="!border-none"
-        >
-            <TabsMUI
-                value={value}
-                onChange={handleChange}
-                sx={{
-                    '.MuiTabs-fixed': {
-                        overflow: 'auto !important'
-                    },
-                    '.MuiTabs-indicator': {
-                        height: '2px',
-                        borderRadius: '10px',
-                        background: '#F17732'
-                    },
-                    '& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
-                        color: '#F17732 !important'
-                    }
-                }}
-            >
-                {listTab.map((item, idx) => (
-                    <Tab
-                        key={idx}
-                        label={item}
-                        {...a11yProps(idx)}
-                        className="text-[#495057] !p-1 !text-[14px] md:!text-[16px] !font-bold !mr-2"
-                    />
-                ))}
-            </TabsMUI>
-        </Box>
-    )
-}
-
-export default Tabs

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>
     )