add modal page item doctor and date picker basic style

app/component/date/datePicker/ButtonDate.js

@@ -0,0 +1,16 @@
+import { Button as ButtonMUI } from '@mui/material'
+import React from 'react'
+
+function ButtonDate({ handleClick, id, text }) {
+    return (
+        <ButtonMUI
+            onClick={handleClick}
+            aria-describedby={id}
+            className="!border-[#E9ECEF] !text-[#6C757D]"
+        >
+            {text}
+        </ButtonMUI>
+    )
+}
+
+export default ButtonDate

app/component/date/datePicker/Field.js

@@ -0,0 +1,32 @@
+import { TextField } from "@mui/material"
+
+function Field({ title, handleClick }) {
+    return (
+        <div className="relative">
+            <TextField
+                label={title}
+                className="!w-full !mx-auto !bg-[#FFF]"
+                sx={{
+                    borderRadius: '8px !important',
+                    '& .MuiFormLabel-root': { transform: 'translate(16px, 50%) scale(1) !important' },
+                    '& .MuiInputLabel-shrink': { transform: 'translate(14px, -9px) scale(0.75) !important' },
+                    '& .MuiInputBase-input': { padding: '12.5px 14px' },
+                    '& .MuiInputBase-root': { borderRadius: '8px !important' },
+                    '& .MuiOutlinedInput-notchedOutline': { border: '1px solid #E9ECEF !important' },
+                    ".Mui-focused": {
+                        '& .MuiOutlinedInput-notchedOutline': {
+                            border: '1px solid #0FA1B3 !important',
+                            transition: '0.5s all'
+                        }
+                    }
+                }}
+            />
+            <span
+                className="absolute cursor-pointer left-0 top-0 w-full h-full"
+                onClick={handleClick}
+            ></span>
+        </div>
+    )
+}
+
+export default Field

app/component/date/datePicker/index.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Popover } from '@mui/material';
+import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import Field from './Field';
+import ButtonDate from './ButtonDate';
+
+function DatePicker({ type, date, updateDate, text, from }) {
+
+    const [anchorEl, setAnchorEl] = useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => setAnchorEl(null);
+
+    const open = true;
+    const id = open ? 'simple-popover' : undefined;
+
+    return (
+        <div>
+            {/* {from && from === 'register' ? (
+                <Field
+                    title={text}
+                    handleClick={handleClick}
+                />
+            ) : (
+                <ButtonDate
+                    text={text}
+                    handleClick={handleClick}
+                />
+            )} */}
+            <DatePickerJalali
+                    onChange={(e) => {
+                        if (e._d) {
+                            updateDate(e._d, type)
+                        }
+                        handleClose()
+                    }}
+                />
+        </div>
+    )
+}
+
+export default DatePicker

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