update subadmin

src/Components/RoleSwitchButton.jsx

@@ -0,0 +1,66 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+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;