67 lines
1.4 KiB
JavaScript
67 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import clsx from "clsx";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import steps from "../../../constants/steps";
|
|
|
|
const useStepIconStyles = makeStyles({
|
|
root: {
|
|
backgroundColor: "#ccc",
|
|
zIndex: 1,
|
|
color: "#fff",
|
|
width: 50,
|
|
height: 50,
|
|
display: "flex",
|
|
borderRadius: "50%",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
active: {
|
|
backgroundImage:
|
|
"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)",
|
|
boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)"
|
|
},
|
|
completed: {
|
|
backgroundImage:
|
|
"linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)"
|
|
}
|
|
});
|
|
|
|
function StepIcon(props) {
|
|
const classes = useStepIconStyles();
|
|
const { active, completed } = props;
|
|
|
|
const getIcon = icon => {
|
|
const step = steps.find(z => z.id === icon - 1);
|
|
return step.icon;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx(classes.root, {
|
|
[classes.active]: active,
|
|
[classes.completed]: completed
|
|
})}
|
|
>
|
|
{getIcon(props.icon)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
StepIcon.propTypes = {
|
|
/**
|
|
* Whether this step is active.
|
|
*/
|
|
active: PropTypes.bool,
|
|
/**
|
|
* Mark the step as completed. Is passed to child components.
|
|
*/
|
|
completed: PropTypes.bool,
|
|
/**
|
|
* The label displayed in the step icon.
|
|
*/
|
|
icon: PropTypes.node
|
|
};
|
|
|
|
export default StepIcon;
|