frontPanel/src/ui_kit/CustomSwitch.tsx

import {IconButton} from "@mui/material";
import {useState} from "react";


export default function CustomSwitch () {
    const [active, setActive] = useState<boolean>(false);
    return (
        <IconButton 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>
    )
}