59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import NumberIcon from "@icons/NumberIcon";
|
|
import { Button, useTheme } from "@mui/material";
|
|
import { ReactNode } from "react";
|
|
|
|
interface Props {
|
|
state: "active" | "done" | "inactive";
|
|
onClick?: () => void;
|
|
index: number;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export default function InstallationStepButton({
|
|
state = "done",
|
|
index,
|
|
onClick,
|
|
children,
|
|
}: Props) {
|
|
const theme = useTheme();
|
|
|
|
const buttonColorByState: Record<Props["state"], string> = {
|
|
active: "#FC712F",
|
|
done: theme.palette.brightPurple.main,
|
|
inactive: theme.palette.grey2.main,
|
|
};
|
|
|
|
const color = buttonColorByState[state];
|
|
|
|
return (
|
|
<Button
|
|
onClick={onClick}
|
|
sx={[
|
|
{
|
|
color,
|
|
fontSize: "16px",
|
|
"& .MuiButton-startIcon": {
|
|
mr: "5px",
|
|
},
|
|
},
|
|
state === "active" && {
|
|
textDecoration: "underline",
|
|
textDecorationColor: color,
|
|
},
|
|
]}
|
|
startIcon={
|
|
<NumberIcon
|
|
number={index}
|
|
color={color}
|
|
sx={{
|
|
height: "26px",
|
|
width: "26px",
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
{children}
|
|
</Button>
|
|
);
|
|
}
|