24 lines
840 B
TypeScript
24 lines
840 B
TypeScript
|
import {IconButton} from "@mui/material";
|
||
|
|
import {useState} from "react";
|
||
|
|
|
||
|
|
|
||
|
|
export default function CustomSwitch () {
|
||
|
|
const [active, setActive] = useState<boolean>(false);
|
||
|
|
return (
|
||
|
|
<IconButton disableRipple onClick={() => setActive(!active)}>
|
||
|
|
<svg width="52" height="30" viewBox="0 0 52 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="52" height="30" rx="15" fill={active ? "#7E2AEA" : "#9A9AAF"} />
|
||
|
|
<rect
|
||
|
|
x={active ? "23" : "1"}
|
||
|
|
y="1"
|
||
|
|
width="28"
|
||
|
|
height="28"
|
||
|
|
rx="14"
|
||
|
|
fill="white"
|
||
|
|
stroke={active ? "#7E2AEA" : "#9A9AAF"}
|
||
|
|
strokeWidth="2"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</IconButton>
|
||
|
|
)
|
||
|
|
}
|