57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import { Box, 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">
|
|
<Box
|
|
as="button"
|
|
display="flex"
|
|
justifyContent="normal"
|
|
alignItems="center"
|
|
// justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
|
|
width="90px"
|
|
height="24px"
|
|
borderRadius="20px"
|
|
backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
|
|
onClick={switch_onChange_handle}
|
|
position="relative"
|
|
fontSize="13px"
|
|
fontWeight="100"
|
|
transition="background-color 0.2s"
|
|
_before={{
|
|
content: '""',
|
|
position: "absolute",
|
|
width: "20px",
|
|
height: "20px",
|
|
borderRadius: "50%",
|
|
backgroundColor: "#FFF",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
|
|
transition: "transform 0.2s",
|
|
left:'2px'
|
|
}}
|
|
>
|
|
<Text
|
|
// color="#FFF"
|
|
fontWeight="400"
|
|
zIndex={1}
|
|
position="absolute"
|
|
mb={0}
|
|
color={isSwitchOn ? "#fff" : "#fff"}
|
|
left={isSwitchOn ? "10px" : "auto"}
|
|
right={isSwitchOn ? "auto" : "10px"}
|
|
>
|
|
{isSwitchOn ? 'Active' : 'InActive'}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SwitchButton;
|