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

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;