74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import clsx from "clsx";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import SettingsIcon from "@material-ui/icons/Settings";
|
|
import GroupAddIcon from "@material-ui/icons/GroupAdd";
|
|
import VideoLabelIcon from "@material-ui/icons/VideoLabel";
|
|
|
|
const useColorlibStepIconStyles = 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 = useColorlibStepIconStyles();
|
|
const { active, completed } = props;
|
|
|
|
const icons = {
|
|
1: <SettingsIcon />,
|
|
2: <GroupAddIcon />,
|
|
3: <VideoLabelIcon />
|
|
};
|
|
|
|
const getIcon = (icon) => {
|
|
return icons[String(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;
|