36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
|
import { useTheme } from "@mui/material";
|
||
|
|
import CustomButton from "../CustomButton";
|
||
|
|
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
Icon: React.ElementType;
|
||
|
|
isActive?: boolean;
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function SelectableIconButton({ Icon, isActive = false, onClick }: Props) {
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<CustomButton
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|