Administrator / spring-boot-microservices-onlineshooping-fullstack · Files

import React from 'react'

const CheckoutSteps = ({ currentStep }) => {
  const steps = [
    { number: 1, name: 'Shipping' },
    { number: 2, name: 'Payment' },
    { number: 3, name: 'Review' }
  ]

  return (
    <div className="checkout-steps">
      {steps.map((step, index) => (
        <React.Fragment key={step.number}>
          <div className={`step ${currentStep >= step.number ? 'active' : ''}`}>
            <div className="step-number">{step.number}</div>
            <div className="step-name">{step.name}</div>
          </div>
          {index < steps.length - 1 && (
            <div className={`step-connector ${currentStep > step.number ? 'active' : ''}`} />
          )}
        </React.Fragment>
      ))}
    </div>
  )
}

export default CheckoutSteps