30 lines
717 B
React
30 lines
717 B
React
|
// SwitchButton.js
|
||
|
|
import { Box, Switch, Text } from '@chakra-ui/react';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
|
||
|
|
const switch_onChange_handle = () => {
|
||
|
|
setIsSwitchOn(!isSwitchOn);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box display="flex" alignItems="center">
|
||
|
|
<Switch
|
||
|
|
size="lg"
|
||
|
|
isChecked={isSwitchOn}
|
||
|
|
onChange={switch_onChange_handle}
|
||
|
|
sx={{
|
||
|
|
".chakra-switch__track": {
|
||
|
|
backgroundColor: isSwitchOn ? "#707070" : "#4CCD8D",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Text ml={4} className={isSwitchOn ? 'mont' : 'year'}>
|
||
|
|
{isSwitchOn ? 'Active' : 'Inactive'}
|
||
|
|
</Text>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SwitchButton;
|