tanami-admin-panel/src/Components/RoleSwitchButton.jsx

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;