62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import { FormControlLabel, FormGroup, Switch } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
|
|
const MaterialUISwitch = styled(Switch)(({ theme }) => ({
|
|
width: 63,
|
|
height: 38,
|
|
padding: 7,
|
|
"& .MuiSwitch-switchBase": {
|
|
margin: 1,
|
|
padding: 0,
|
|
transform: "translateX(6px)",
|
|
"&.Mui-checked": {
|
|
color: "#fff",
|
|
transform: "translateX(24px)",
|
|
"& .MuiSwitch-thumb:before": {
|
|
background: "#5559CE",
|
|
borderRadius: "50%",
|
|
},
|
|
"& + .MuiSwitch-track": {
|
|
opacity: 1,
|
|
backgroundColor: "#c7cef4",
|
|
},
|
|
},
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
background: "#d7d7d7",
|
|
width: 32,
|
|
height: 32,
|
|
"&::before": {
|
|
content: "''",
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
left: 0,
|
|
top: 0,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "center",
|
|
background: "#d7d7d7",
|
|
borderRadius: "50%",
|
|
},
|
|
},
|
|
"& .MuiSwitch-track": {
|
|
opacity: 1,
|
|
background: "transparent",
|
|
border: "1px solid #d7d7d7",
|
|
borderRadius: "27px",
|
|
transform: "translateY(-2px)",
|
|
},
|
|
}));
|
|
|
|
function SwitchTable({ value }) {
|
|
return (
|
|
<FormGroup className="custom-switch">
|
|
<FormControlLabel
|
|
control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
|
|
/>
|
|
</FormGroup>
|
|
);
|
|
}
|
|
|
|
export default SwitchTable;
|