trampa-frontend/src/components/StepProgress/StepProgress.js

import React from "react";
import PropTypes from "prop-types";
import { ComponentContainer, Progress, StepBar, StepLine } from "./StepProgress.styled";
import { ReactComponent as Checkmark } from "../../assets/images/svg/checkmark.svg";

const StepProgress = (props) => {
  const steps = [];
  for (let i = 1; i <= props.numberOfSteps; i++) {
    steps.push({
      done: i < props.current,
      current: i === props.current,
    });
  }
  return (
    <ComponentContainer done>
      {steps.map((item, index) =>
        index === 0 ? (
          <StepBar current={item.current} done={item.done}>
            {item.done ? <Checkmark /> : index+1}
          </StepBar>
        ) : (
          <React.Fragment key={index}>
            <StepLine done={item.done || item.current} >
              <Progress done={item.done || item.current} />
            </StepLine>
            <StepBar current={item.current} done={item.done}>
              {item.done ? <Checkmark /> : index+1}
            </StepBar>
          </React.Fragment>
        )
      )}
    </ComponentContainer>
  );
};

StepProgress.propTypes = {
  children: PropTypes.node,
  handleNext: PropTypes.node,
  current: PropTypes.number,
  numberOfSteps: PropTypes.number,
};

export default StepProgress;