sponser button

src/Components/SwitchButton.jsx

@@ -1,9 +1,18 @@
-import { Box, Text } from '@chakra-ui/react';
-import React from 'react';
+import { Box, Text } from "@chakra-ui/react";
+import React, { useRef } from "react";
+import audioClick from "../assets/click-151673.mp3";
 
 const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
+
+  // const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const audio = useRef();
+
   const switch_onChange_handle = () => {
     setIsSwitchOn(!isSwitchOn);
+    if (audio.current) {
+      audio.current.play();
+    }
   };
 
   return (
@@ -15,7 +24,7 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
         alignItems="center"
         // justifyContent={isSwitchOn ? "flex-end" : "flex-start"}
         width="90px"
-        height="24px"
+        height="25px"
         borderRadius="20px"
         backgroundColor={isSwitchOn ? "#004118" : "#ef0000"}
         onClick={switch_onChange_handle}
@@ -24,16 +33,28 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
         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'
+
           content: '""',
           position: "absolute",
-          width: "20px",
-          height: "20px",
+          height: "25px",
+          width: "25px",
+          left: "0px",
+          background:
+            "conic-gradient(rgb(104, 104, 104), white, rgb(104, 104, 104), white, rgb(104, 104, 104))",
           borderRadius: "50%",
-          backgroundColor: "#FFF",
-          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+          transitionDuration: ".3s",
+          boxShadow: " 5px 2px 7px rgba(8, 8, 8, 0.308)",
           transform: isSwitchOn ? "translateX(65px)" : "translateX(0)",
-          transition: "transform 0.2s",
-          left:'2px'
         }}
       >
         <Text
@@ -46,9 +67,10 @@ const SwitchButton = ({ isSwitchOn, setIsSwitchOn }) => {
           left={isSwitchOn ? "10px" : "auto"}
           right={isSwitchOn ? "auto" : "10px"}
         >
-          {isSwitchOn ? 'Active' : 'InActive'}
+          {isSwitchOn ? "Active" : "InActive"}
         </Text>
       </Box>
+      <audio ref={audio} src={audioClick} />
     </Box>
   );
 };