58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
import React from "react";
|
|
|
|
const SubscriptionLayout = ({
|
|
configStep = [],
|
|
currentStep,
|
|
setCurrentStep,
|
|
stepStatus = {},
|
|
}) => {
|
|
return (
|
|
<div className="container-fluid stepper-container align-items-start my-4">
|
|
<ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-100 ">
|
|
{configStep.map((step, index) => {
|
|
const stepNumber = index + 1;
|
|
const status = stepStatus[stepNumber] || "pending";
|
|
|
|
return (
|
|
<li
|
|
key={step.name}
|
|
className="timeline-item text-center flex-fill position-relative"
|
|
>
|
|
<div
|
|
className={`timeline-point mx-auto mb-2
|
|
${status === "success" ? "completed" : ""}
|
|
${status === "failed" ? "failed" : ""}
|
|
${stepNumber === currentStep && status === "pending" ? "active" : ""}
|
|
`}
|
|
>
|
|
{status === "failed" ? (
|
|
<i className="bx bx-x text-white"></i>
|
|
) : status === "success" ? (
|
|
<i className="bx bx-check text-white"></i>
|
|
) : (
|
|
stepNumber
|
|
)}
|
|
</div>
|
|
|
|
<small className="fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted">
|
|
{step.name}
|
|
</small>
|
|
|
|
{index !== configStep.length - 1 && (
|
|
<div className={`timeline-line-horizontal`}></div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<div className="step-content mt-4">
|
|
{configStep[currentStep - 1]?.component()}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubscriptionLayout;
|
|
|