File size: 1,433 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 | // material-ui
import Grid from '@mui/material/Grid';
import Slider from '@mui/material/Slider';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
// project imports
import useConfig from 'hooks/useConfig';
// concat 'px'
function valueText(value) {
return `${value}px`;
}
export default function BorderRadius() {
const {
state: { borderRadius },
setField
} = useConfig();
const handleChange = (_event, newValue) => {
setField('borderRadius', newValue);
};
return (
<Stack sx={{ pl: 2, pb: 2, pr: 4, gap: 2.5 }}>
<Typography variant="h5">BORDER RADIUS</Typography>
<Grid container spacing={1.25} sx={{ pt: 2, alignItems: 'center', justifyContent: 'center' }}>
<Grid>
<Typography variant="h6">4px</Typography>
</Grid>
<Grid size="grow">
<Slider
size="small"
value={borderRadius}
onChange={handleChange}
getAriaValueText={valueText}
valueLabelDisplay="on"
aria-labelledby="discrete-slider-small-steps"
min={4}
max={24}
color="primary"
sx={(theme) => ({
'& .MuiSlider-valueLabel': { color: 'primary.light' }
})}
/>
</Grid>
<Grid>
<Typography variant="h6">24px</Typography>
</Grid>
</Grid>
</Stack>
);
}
|