frontPanel/src/ui_kit/SelectableButton.tsx

31 lines
939 B
TypeScript
Executable File

import {Button, SxProps, Theme, useTheme} from "@mui/material";
interface Props {
children?: React.ReactNode;
isSelected?: boolean;
onClick: () => void;
sx?: SxProps<Theme>;
}
export default function SelectableButton({ children, isSelected = false, onClick, sx }: Props) {
const theme = useTheme();
return (
<Button variant='contained'
onClick={onClick}
sx={{
backgroundColor: isSelected ? theme.palette.brightPurple.main : theme.palette.background.default,
border: isSelected ? "none" : `1px solid ${theme.palette.grey2.main}`,
color: isSelected ? "white" : theme.palette.grey2.main,
py: isSelected ? "12px" : "11px",
width: "auto",
flex: "1 1 auto",
boxShadow: 'none',
...sx
}}
>
{children}
</Button>
);
}