diff --git a/src/App.css b/src/App.css index 13b4daa..5668f26 100644 --- a/src/App.css +++ b/src/App.css @@ -336,3 +336,151 @@ font-size: 22px !important; } } + + + + + +/* ========= [ switch BTN ============ */ + + + +/* From Uiverse.io by Nawsome */ +.switch { + display: block; + background-color: black; + width: 85px; + height: 115px; + box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; + border-radius: 5px; + padding: 20px; + perspective: 700px; +} + +.switch input { + display: none; +} + +.switch input:checked + .button { + transform: translateZ(20px) rotateX(25deg); + box-shadow: 0 -10px 20px #ff1818; +} + +.switch input:checked + .button .light { + animation: flicker 0.2s infinite 0.3s; +} + +.switch input:checked + .button .shine { + opacity: 1; +} + +.switch input:checked + .button .shadow { + opacity: 0; +} + +.switch .button { + display: block; + transition: all 0.3s cubic-bezier(1, 0, 1, 1); + transform-origin: center center -20px; + transform: translateZ(20px) rotateX(-25deg); + transform-style: preserve-3d; + background-color: #9b0621; + height: 100%; + position: relative; + cursor: pointer; + background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%); + background-repeat: no-repeat; +} + +.switch .button::before { + content: ""; + background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000; + background-repeat: no-repeat; + width: 100%; + height: 50px; + transform-origin: top; + transform: rotateX(-90deg); + position: absolute; + top: 0; +} + +.switch .button::after { + content: ""; + background-image: linear-gradient(#650000, #320000); + width: 100%; + height: 58px; + transform-origin: top; + transform: translateY(50px) rotateX(-90deg); + position: absolute; + bottom: 0; + box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5); +} + +.switch .light { + opacity: 0; + animation: light-off 1s; + position: absolute; + width: 100%; + height: 100%; + background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%); +} + +.switch .dots { + position: absolute; + width: 100%; + height: 100%; + background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%); + background-size: 10px 10px; +} + +.switch .characters { + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%; + background-repeat: no-repeat; +} + +.switch .shine { + transition: all 0.3s cubic-bezier(1, 0, 1, 1); + opacity: 0.3; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%; + background-repeat: no-repeat; +} + +.switch .shadow { + transition: all 0.3s cubic-bezier(1, 0, 1, 1); + opacity: 1; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8)); + background-repeat: no-repeat; +} + +@keyframes flicker { + 0% { + opacity: 1; + } + + 80% { + opacity: 0.8; + } + + 100% { + opacity: 1; + } +} + +@keyframes light-off { + 0% { + opacity: 1; + } + + 80% { + opacity: 0; + } +} \ No newline at end of file diff --git a/src/Components/DummyComponent.jsx b/src/Components/DummyComponent.jsx new file mode 100644 index 0000000..8858bb5 --- /dev/null +++ b/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 ( + + + + + ); +}; + +export default DummyComponent; diff --git a/src/Components/SwitchButton.jsx b/src/Components/SwitchButton.jsx index 3cd1788..28b46b9 100644 --- a/src/Components/SwitchButton.jsx +++ b/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' }} > { left={isSwitchOn ? "10px" : "auto"} right={isSwitchOn ? "auto" : "10px"} > - {isSwitchOn ? 'Active' : 'InActive'} + {isSwitchOn ? "Active" : "InActive"} +