frontPanel/src/ui_kit/CustomCheckbox.tsx

import { FormControlLabel, Checkbox, useTheme, Box } from "@mui/material";
import React from "react";


interface Props {
    label: string;
    handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    checked?: boolean;
}

export default function CustomCheckbox({ label, handleChange, checked}: Props) {
    const theme = useTheme();

    return (
        <FormControlLabel
            control={
                <Checkbox
                icon={<Icon />}
                checkedIcon={<CheckedIcon />}
                onChange={handleChange}
                checked={checked}
            />}
            label={label}
            sx={{
                color: theme.palette.grey2.main,
                ml: "-9px",
                userSelect: "none",
            }}

        />
    );
}

function Icon() {
    const theme = useTheme();

    return (
        <Box sx={{
            height: "26px",
            width: "26px",
            borderRadius: "8px",
            backgroundColor: theme.palette.background.default,
            border: `1px solid ${theme.palette.grey2.main}`,
        }} />
    );
}

function CheckedIcon() {
    const theme = useTheme();

    return (
        <Box sx={{
            height: "26px",
            width: "26px",
            borderRadius: "8px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: theme.palette.brightPurple.main,
            border: `1px solid ${theme.palette.grey2.main}`,
        }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 25 18" fill="none">
                <path d="M2 9L10 16.5L22.5 1.5" stroke='#ffffff' strokeWidth="4" strokeLinecap="round" />
            </svg>
        </Box>
    );
}