add modal page item doctor and date picker basic style

2024-08-25 02:09:18 +03:30
parent 9701547d1f
commit 92e48cadd3
10 changed files with 84 additions and 11 deletions
@@ -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