sponser button

src/Components/DummyComponent.jsx

@@ -0,0 +1,43 @@
+import { Box, Input } from "@chakra-ui/react";
+import React, { useRef, useState } from "react";
+import audioClick from "../assets/click-151673.mp3";
+
+const DummyComponent = () => {
+  // Define the state for the checkbox
+  const [isSwitchOn, setIsSwitchOn] = useState(false);
+
+  const audio = useRef();
+
+  // Function to toggle the switch
+  const handleToggle = () => {
+    setIsSwitchOn(!isSwitchOn);
+    if(audio.current){
+        console.log("hit");
+        audio.current.play();
+        console.log( audio.current);
+    }
+  };
+
+  return (
+    <Box display={"flex"} justifyContent={"right"} p={"2rem"}>
+      <label className="switch">
+        <Input
+          type="checkbox"
+          checked={isSwitchOn}
+          onChange={handleToggle} // Toggle the switch on change
+        />
+        <Box className="button">
+          <div className="light"></div>
+          <div className="dots"></div>
+          <div className="characters"></div>
+          <div className="shine"></div>
+          <div className="shadow"></div>
+        </Box>
+      </label>
+      
+      <audio ref={audio} src={audioClick} />
+    </Box>
+  );
+};
+
+export default DummyComponent;

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>
   );
 };