39 lines
996 B
JavaScript
39 lines
996 B
JavaScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Stack from '@mui/material/Stack';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
|
||
|
|
export default function DynamicValues() {
|
||
|
|
const [color, setColor] = React.useState('#007fff');
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack spacing={1} sx={{ alignItems: 'center' }}>
|
||
|
|
<Typography
|
||
|
|
component="label"
|
||
|
|
variant="body2"
|
||
|
|
sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}
|
||
|
|
>
|
||
|
|
Pick a color to see a live preview
|
||
|
|
<input
|
||
|
|
type="color"
|
||
|
|
value={color}
|
||
|
|
onChange={(event) => setColor(event.target.value)}
|
||
|
|
/>
|
||
|
|
</Typography>
|
||
|
|
<Box
|
||
|
|
component="div"
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
width: 75,
|
||
|
|
height: 75,
|
||
|
|
borderRadius: 2,
|
||
|
|
backgroundColor: 'var(--bg)',
|
||
|
|
}}
|
||
|
|
style={{ '--bg': color }}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
);
|
||
|
|
}
|