frontPanel/src/pages/startPage/SelectableIconButton.tsx

import {Button, SxProps, Theme, useTheme} from "@mui/material";

interface Props {
    Icon: React.ElementType;
    isActive?: boolean;
    onClick: () => void;
    sx?: SxProps<Theme>;
}

export default function SelectableIconButton({ Icon, isActive = false, onClick, sx }: Props) {
    const theme = useTheme();

    return (
        <Button
            onClick={onClick}
            variant="outlined"
            startIcon={<Icon color={isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main} />}
            sx={{
                backgroundColor: isActive ? undefined : theme.palette.background.default,
                borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
                color: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
                p: "7px",
                width: "auto",
                minWidth: 0,
                "& .MuiButton-startIcon": {
                    mr: 0,
                    ml: 0,
                },
                "&:hover": {
                    borderColor: isActive ? theme.palette.brightPurple.main : theme.palette.grey2.main,
                },
                ...sx
            }}
        />
    );
}