add modal page item doctor and date picker basic style

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]'>