add modal page item doctor and date picker basic style

app/component/Tabs.js

@@ -0,0 +1,48 @@
+import { Box, Tab, Tabs as TabsMUI } from '@mui/material';
+
+function a11yProps(index) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+};
+
+function Tabs({ value, handleChange, listTab, isSm }) {
+    return (
+        <Box
+            className="!border-none"
+        >
+            <TabsMUI
+                value={value}
+                onChange={handleChange}
+                sx={{
+                    '.MuiTabs-fixed': {
+                        overflow: 'auto !important'
+                    },
+                    '.MuiTabs-indicator': {
+                        height: isSm ? '4px' : '2px',
+                        borderRadius: isSm ? '8px' : '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
+                            ${isSm ? '!w-1/2 !m-0' : '!mr-2'}
+                        `}
+                    />
+                ))}
+            </TabsMUI>
+        </Box>
+    )
+}
+
+export default Tabs

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