66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import { Box, Text } from "@chakra-ui/react";
|
|
import React from "react";
|
|
|
|
const RoleSwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
|
|
|
|
// const [isSwitchOn, setIsSwitchOn] = useState(false);
|
|
|
|
// const audio = useRef();
|
|
|
|
const switchOnChangeHandle = () => {
|
|
setIsSwitchOn(!isSwitchOn);
|
|
// if (audio.current) {
|
|
// audio.current.play();
|
|
// }
|
|
};
|
|
|
|
return (
|
|
<Box display="flex" alignItems="center">
|
|
<Box
|
|
as="button"
|
|
display="flex"
|
|
justifyContent="normal"
|
|
alignItems="center"
|
|
// justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
|
|
width="85px"
|
|
height="24px"
|
|
borderRadius="20px"
|
|
backgroundColor={isSwitchOn ? "#00ffcc" : "#b3ff99"}
|
|
onClick={switchOnChangeHandle}
|
|
position="relative"
|
|
fontSize="12px"
|
|
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(61px)" : "translateX(0)",
|
|
transition: "transform 0.2s",
|
|
left:'2px',
|
|
top:'2px'
|
|
}}
|
|
>
|
|
<Text
|
|
fontWeight="500"
|
|
zIndex={1}
|
|
position="absolute"
|
|
mb={0}
|
|
color={isSwitchOn ? "#000" : "#000"}
|
|
left={isSwitchOn ? "10px" : "auto"}
|
|
right={isSwitchOn ? "auto" : "10px"}
|
|
>
|
|
{isSwitchOn ? "Maker" : "Checker"}
|
|
</Text>
|
|
</Box>
|
|
{/* <audio ref={audio} src={audioClick} /> */}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default RoleSwitchButton;
|