borgwarehouse/Components/WizardSteps/WizardStepBar/WizardStepBar.js

//Lib
import React from 'react';
import classes from './WizardStepBar.module.css';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons';

function WizardStepBar(props) {
    ////Functions
    //Color onClick on a step
    const colorHandler = (step) => {
        if (step <= props.step) {
            return classes.active;
        } else {
            return classes.inactive;
        }
    };
    //Color onClick on next step button
    const colorChevronNextStep = () => {
        if (props.step < 4) {
            return classes.activeChevron;
        } else {
            return classes.inactiveChevron;
        }
    };
    //Color onClick on previous step button
    const colorChevronPreviousStep = () => {
        if (props.step > 1) {
            return classes.activeChevron;
        } else {
            return classes.inactiveChevron;
        }
    };

    return (
        <div className={classes.stepBarContainer}>
            <IconChevronLeft
                size={32}
                className={colorChevronPreviousStep()}
                onClick={props.previousStepHandler}
            />
            <ul>
                <li
                    className={colorHandler(2)}
                    onClick={() => props.setStep(1)}
                >
                    <div
                        className={[classes.number, colorHandler(1)].join(' ')}
                    >
                        1
                    </div>
                    <div className={[classes.text, colorHandler(1)].join(' ')}>
                        Client Setup
                    </div>
                    <div className={classes.line}></div>
                </li>
                <li
                    className={colorHandler(3)}
                    onClick={() => props.setStep(2)}
                >
                    <div
                        className={[classes.number, colorHandler(2)].join(' ')}
                    >
                        2
                    </div>
                    <div className={[classes.text, colorHandler(2)].join(' ')}>
                        Init. repository
                    </div>
                    <div className={classes.line}></div>
                </li>
                <li
                    className={colorHandler(4)}
                    onClick={() => props.setStep(3)}
                >
                    <div
                        className={[classes.number, colorHandler(3)].join(' ')}
                    >
                        3
                    </div>
                    <div className={[classes.text, colorHandler(3)].join(' ')}>
                        Launch & Verify
                    </div>
                    <div className={classes.line}></div>
                </li>
                <li onClick={() => props.setStep(4)}>
                    <div
                        className={[classes.number, colorHandler(4)].join(' ')}
                    >
                        4
                    </div>
                    <div className={[classes.text, colorHandler(4)].join(' ')}>
                        Automation
                    </div>
                </li>
            </ul>
            <IconChevronRight
                size={32}
                className={colorChevronNextStep()}
                onClick={props.nextStepHandler}
            />
        </div>
    );
}

export default WizardStepBar;