| | |
| | | import * as Common from '@/utils/common'; |
| | | import { } from '@/config/setting'; |
| | | |
| | | function TabPanel(props) { |
| | | const { children, value, index, ...other } = props; |
| | | |
| | | return ( |
| | | <div |
| | | role="tabpanel" |
| | | hidden={value !== index} |
| | | id={`vertical-tabpanel-${index}`} |
| | | aria-labelledby={`vertical-tab-${index}`} |
| | | {...other} |
| | | > |
| | | {value === index && ( |
| | | <Box sx={{ p: 3 }}> |
| | | <Typography>{children}</Typography> |
| | | </Box> |
| | | )} |
| | | </div> |
| | | ); |
| | | } |
| | | |
| | | function a11yProps(index) { |
| | | return { |
| | | id: `vertical-tab-${index}`, |
| | | 'aria-controls': `vertical-tabpanel-${index}`, |
| | | }; |
| | | } |
| | | |
| | | const Settings = () => { |
| | | const translate = useTranslate(); |
| | | const theme = useTheme(); |
| | | const [value, setValue] = React.useState(0); |
| | | |
| | | useEffect(() => { |
| | | }, [value]); |
| | | |
| | | return ( |
| | | <> |
| | |
| | | sx={{ |
| | | borderRight: 1, |
| | | borderColor: 'divider', |
| | | width: 150 |
| | | width: 150, |
| | | }} |
| | | > |
| | | <Tab label={translate('settings.base')} {...a11yProps(0)} /> |
| | | <Tab label={translate('settings.security')} {...a11yProps(1)} /> |
| | | <Tab |
| | | label={translate('settings.base')} |
| | | id='vertical-tab-0' |
| | | aria-controls='vertical-tabpanel-0' |
| | | /> |
| | | <Tab label={translate('settings.security')} |
| | | id='vertical-tab-1' |
| | | aria-controls='vertical-tabpanel-1' |
| | | /> |
| | | </Tabs> |
| | | <TabPanel value={value} index={0}> |
| | | {translate('settings.base')} |
| | | </TabPanel> |
| | | <TabPanel value={value} index={1}> |
| | | {translate('settings.security')} |
| | | </TabPanel> |
| | | <BaseSettings |
| | | value={value} |
| | | /> |
| | | <SecuritySettings |
| | | value={value} |
| | | /> |
| | | </Box> |
| | | </CardContent> |
| | | </Card> |
| | |
| | | ) |
| | | } |
| | | |
| | | const BaseSettings = (props) => { |
| | | const { children, value, ...other } = props; |
| | | |
| | | return ( |
| | | <Box |
| | | hidden={value !== 0} |
| | | sx={{ p: 3 }} |
| | | {...other} |
| | | > |
| | | <Typography> |
| | | Base Settings |
| | | </Typography> |
| | | </Box> |
| | | |
| | | ) |
| | | } |
| | | |
| | | const SecuritySettings = (props) => { |
| | | const { children, value, ...other } = props; |
| | | |
| | | return ( |
| | | <Box |
| | | hidden={value !== 1} |
| | | sx={{ p: 3 }} |
| | | {...other} |
| | | > |
| | | <Typography> |
| | | Security Settings |
| | | </Typography> |
| | | </Box> |
| | | |
| | | ) |
| | | } |
| | | |
| | | export default Settings; |