1import React from 'react';
 2import Switch, {SwitchProps} from '@mui/material/Switch';
 3import theme from '../../theme';
 4
 5interface Props {
 6  activate: () => void;
 7  checked: boolean;
 8}
 9
10const switchStyles = {
11  width: 42,
12  height: 26,
13  padding: 0,
14  '& .MuiSwitch-switchBase': {
15    padding: 0,
16    margin: 0.25,
17    transitionDuration: '300ms',
18    '&.Mui-checked': {
19      transform: 'translateX(16px)',
20      color: '#fff',
21      '& + .MuiSwitch-track': {
22        backgroundColor: 'primary.main',
23        opacity: 1,
24        border: 0,
25      },
26      '&.Mui-disabled + .MuiSwitch-track': {
27        opacity: 0.5,
28      },
29    },
30    '&.Mui-focusVisible .MuiSwitch-thumb': {
31      color: theme.palette.primary.main,
32      border: '6px solid #fff',
33    },
34    '&.Mui-disabled .MuiSwitch-thumb': {
35      color: 'grey[100]',
36    },
37    '&.Mui-disabled + .MuiSwitch-track': {
38      opacity: 0.7,
39    },
40  },
41  '& .MuiSwitch-thumb': {
42    boxSizing: 'border-box',
43    width: 22,
44    height: 22,
45  },
46  '& .MuiSwitch-track': {
47    borderRadius: 26 / 2,
48    backgroundColor: '#E9E9EA',
49    opacity: 1,
50    transition: 'background-color 500ms',
51  },
52};
53
54const Toggle = ({activate, checked, ...props}: SwitchProps & Props) => {
55  return (
56    <Switch
57      sx={switchStyles}
58      checked={checked}
59      onChange={activate}
60      focusVisibleClassName=".Mui-focusVisible"
61      disableRipple
62      {...props}
63    />
64  );
65};
66
67export default Toggle;