File size: 4,167 Bytes
95b5a04 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import PropTypes from 'prop-types';
import { Activity, useState } from 'react';
// material-ui
import { useColorScheme, useTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Drawer from '@mui/material/Drawer';
import Fab from '@mui/material/Fab';
import Grid from '@mui/material/Grid';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
// project imports
import FontFamily from './FontFamily';
import BorderRadius from './BorderRadius';
import { DEFAULT_THEME_MODE } from 'config';
import MainCard from 'ui-component/cards/MainCard';
import AnimateButton from 'ui-component/extended/AnimateButton';
import SimpleBar from 'ui-component/third-party/SimpleBar';
import useConfig from 'hooks/useConfig';
// assets
import { IconSettings, IconPlus } from '@tabler/icons-react';
function CustomTabPanel({ children, value, index, ...other }) {
return (
<div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
<Activity mode={value === index ? 'visible' : 'hidden'}>
<Box>{children}</Box>
</Activity>
</div>
);
}
export default function Customization() {
const theme = useTheme();
const { resetState } = useConfig();
const { setMode } = useColorScheme();
// drawer on/off
const [open, setOpen] = useState(false);
const handleToggle = () => {
setOpen(!open);
};
const handleReset = () => {
setMode(DEFAULT_THEME_MODE);
resetState();
};
return (
<>
{/* toggle button */}
<Tooltip title="Live Customize">
<Fab
component="div"
onClick={handleToggle}
size="medium"
variant="circular"
color="secondary"
sx={{
borderRadius: 0,
borderTopLeftRadius: '50%',
borderBottomLeftRadius: '50%',
borderTopRightRadius: '50%',
borderBottomRightRadius: '4px',
top: '25%',
position: 'fixed',
right: 10,
zIndex: 1200,
boxShadow: theme.vars.customShadows.secondary
}}
>
<AnimateButton type="rotate">
<IconButton color="inherit" size="large" disableRipple aria-label="live customize">
<IconSettings />
</IconButton>
</AnimateButton>
</Fab>
</Tooltip>
<Drawer anchor="right" onClose={handleToggle} open={open} slotProps={{ paper: { sx: { width: 375 } } }}>
<Activity mode={open ? 'visible' : 'hidden'}>
<SimpleBar>
<MainCard content={false} border={false}>
<Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between', p: 2.5, gap: 1.5 }}>
<Typography variant="h5">Theme Customization</Typography>
<Stack direction="row" sx={{ alignItems: 'center', gap: 1.25 }}>
<Button variant="outlined" color="error" size="small" onClick={handleReset}>
Reset
</Button>
<IconButton sx={{ p: 0, color: 'grey.600' }} onClick={handleToggle}>
<IconPlus size={24} style={{ transform: 'rotate(45deg)' }} />
</IconButton>
</Stack>
</Stack>
<Divider />
<Grid container spacing={2}>
<Grid size={12}>
{/* font family */}
<FontFamily />
<Divider />
</Grid>
<Grid size={12}>
{/* border radius */}
<BorderRadius />
<Divider />
</Grid>
</Grid>
</MainCard>
</SimpleBar>
</Activity>
</Drawer>
</>
);
}
CustomTabPanel.propTypes = { children: PropTypes.node, value: PropTypes.number, index: PropTypes.number, other: PropTypes.any };
|