63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
|
|
const steps = [
|
|
{ number: 1, title: 'Personal Info' },
|
|
{ number: 2, title: 'Preferences' },
|
|
{ number: 3, title: 'Directory' },
|
|
{ number: 4, title: 'Account' }
|
|
];
|
|
|
|
return (
|
|
<div className="mb-8">
|
|
{/* Progress Bar */}
|
|
<div className="flex items-center justify-between relative">
|
|
{steps.map((step, index) => (
|
|
<React.Fragment key={step.number}>
|
|
{/* Step Circle */}
|
|
<div className="flex flex-col items-center relative z-10">
|
|
<div className={`
|
|
w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
|
|
transition-all duration-300
|
|
${currentStep === step.number
|
|
? 'bg-[#ff9e77] text-white scale-110 shadow-lg'
|
|
: currentStep > step.number
|
|
? 'bg-[#81B29A] text-white'
|
|
: 'bg-[#ddd8eb] text-[#664fa3]'
|
|
}
|
|
`}>
|
|
{currentStep > step.number ? '✓' : step.number}
|
|
</div>
|
|
<span className={`
|
|
text-sm mt-2 font-medium transition-colors
|
|
${currentStep === step.number ? 'text-[#ff9e77]' : 'text-[#664fa3]'}
|
|
`} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Connecting Line */}
|
|
{index < steps.length - 1 && (
|
|
<div className="flex-1 h-1 mx-2 relative -top-6 bg-[#ddd8eb]">
|
|
<div
|
|
className={`
|
|
h-full transition-all duration-500
|
|
${currentStep > step.number ? 'bg-[#81B29A] w-full' : 'bg-transparent w-0'}
|
|
`}
|
|
/>
|
|
</div>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Step Counter */}
|
|
<p className="text-center text-[#664fa3] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Step <span className="font-semibold text-[#ff9e77]">{currentStep}</span> of {totalSteps}
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegistrationStepIndicator;
|