42 lines
1.1 KiB
React
42 lines
1.1 KiB
React
|
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){
|
||
|
|
audio.current.play();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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;
|