51 lines
1.3 KiB
JavaScript
51 lines
1.3 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"
|
|
alignItems="center"
|
|
justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
|
|
width="100px"
|
|
height="40px"
|
|
borderRadius="20px"
|
|
backgroundColor={isSwitchOn ? "#707070" : "#4CCD8D"}
|
|
onClick={switch_onChange_handle}
|
|
position="relative"
|
|
transition="background-color 0.2s"
|
|
_before={{
|
|
content: '""',
|
|
position: "absolute",
|
|
width: "40px",
|
|
height: "40px",
|
|
borderRadius: "50%",
|
|
backgroundColor: "#FFF",
|
|
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
|
|
transform: isSwitchOn ? "translateX(60px)" : "translateX(0)",
|
|
transition: "transform 0.2s",
|
|
}}
|
|
>
|
|
<Text
|
|
color="#FFF"
|
|
fontWeight="bold"
|
|
zIndex={1}
|
|
position="absolute"
|
|
left={isSwitchOn ? "10px" : "auto"}
|
|
right={isSwitchOn ? "auto" : "10px"}
|
|
>
|
|
{isSwitchOn ? 'Active' : 'Inactive'}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default SwitchButton;
|