81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
import { Component } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Switch from '@mui/material/Switch';
|
|
import Typography from '@mui/material/Typography';
|
|
import { alpha } from '@mui/material/styles';
|
|
|
|
/** Base pill with elevation, shared styling, and an overridable trailing element. */
|
|
class ElevatedPill extends Component {
|
|
renderTrailing() {
|
|
return null;
|
|
}
|
|
|
|
render() {
|
|
const { label, active = false } = this.props;
|
|
return (
|
|
<Box
|
|
component="label"
|
|
sx={(theme) => ({
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 0.5,
|
|
px: 1.5,
|
|
py: 0.25,
|
|
borderRadius: 999,
|
|
background: active
|
|
? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.28)}, ${alpha(
|
|
theme.palette.primary.main,
|
|
0.22,
|
|
)})`
|
|
: `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.16)}, ${alpha(
|
|
theme.palette.primary.main,
|
|
0.10,
|
|
)})`,
|
|
color: 'text.primary',
|
|
cursor: 'pointer',
|
|
userSelect: 'none',
|
|
boxShadow: theme.shadows[1],
|
|
transition: 'background 150ms ease, box-shadow 150ms ease',
|
|
})}
|
|
>
|
|
<Typography variant="body2" sx={{ lineHeight: 1 }}>
|
|
{label}
|
|
</Typography>
|
|
{this.renderTrailing()}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class ToggleElevatedPill extends ElevatedPill {
|
|
renderTrailing() {
|
|
const { checked, onToggle } = this.props;
|
|
return (
|
|
<Switch
|
|
size="small"
|
|
checked={checked}
|
|
onChange={(event) => onToggle(event.target.checked)}
|
|
sx={(theme) => ({
|
|
'& .MuiSwitch-switchBase': {
|
|
color: checked ? 'success.main' : 'grey.300',
|
|
},
|
|
'& .Mui-checked': {
|
|
color: 'success.main',
|
|
},
|
|
'& .Mui-checked + .MuiSwitch-track': {
|
|
backgroundColor: alpha(theme.palette.success.main, 0.35),
|
|
},
|
|
})}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export class ActionElevatedPill extends ElevatedPill {
|
|
renderTrailing() {
|
|
return this.props.icon;
|
|
}
|
|
}
|
|
|
|
export default ElevatedPill;
|