54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { styled } from '@mui/joy/styles';
|
||
|
|
import VolumeUpRoundedIcon from '@mui/icons-material/VolumeUpRounded';
|
||
|
|
import VolumeOffRoundedIcon from '@mui/icons-material/VolumeOffRounded';
|
||
|
|
|
||
|
|
const ToggleButton = styled('button')(({ theme }) => ({
|
||
|
|
padding: '0.5rem 1rem',
|
||
|
|
borderRadius: theme.vars.radius.sm,
|
||
|
|
display: 'inline-flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
gap: '8px',
|
||
|
|
minHeight: 40,
|
||
|
|
fontFamily: theme.vars.fontFamily.body,
|
||
|
|
fontSize: theme.vars.fontSize.md,
|
||
|
|
fontWeight: theme.vars.fontWeight.md,
|
||
|
|
alignItems: 'center',
|
||
|
|
border: '1px solid',
|
||
|
|
borderColor: theme.vars.palette.neutral.outlinedBorder,
|
||
|
|
backgroundColor: theme.vars.palette.background.body,
|
||
|
|
boxShadow: theme.vars.shadow.md,
|
||
|
|
[theme.focus.selector]: theme.focus.default,
|
||
|
|
...theme.variants.plain.neutral,
|
||
|
|
variants: [
|
||
|
|
{
|
||
|
|
props: { 'aria-pressed': 'false' },
|
||
|
|
style: {
|
||
|
|
'&:hover': theme.variants.plainHover.neutral,
|
||
|
|
'&:active': theme.variants.plainActive.neutral,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
props: { 'aria-pressed': 'true' },
|
||
|
|
style: {
|
||
|
|
color: theme.vars.palette.danger.plainColor,
|
||
|
|
backgroundColor: theme.vars.palette.background.body,
|
||
|
|
boxShadow: theme.shadow.sm.replace(/,/g, ', inset'),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}));
|
||
|
|
|
||
|
|
export default function StyledComponent() {
|
||
|
|
const [muted, setMuted] = React.useState(false);
|
||
|
|
return (
|
||
|
|
<ToggleButton
|
||
|
|
aria-pressed={muted ? 'true' : 'false'}
|
||
|
|
onClick={() => setMuted((bool) => !bool)}
|
||
|
|
sx={{ minWidth: 120 }}
|
||
|
|
>
|
||
|
|
Mute {muted ? <VolumeOffRoundedIcon /> : <VolumeUpRoundedIcon />}
|
||
|
|
</ToggleButton>
|
||
|
|
);
|
||
|
|
}
|