status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-08 09:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: map steps instead of use components

Browse Source
This commit is contained in:
RadoslavDimchev 2023-08-30 14:27:22 +03:00
parent aedda4a9c5
commit bc74b0a93a
1 changed files with 20 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
View File

@ -6,6 +6,15 @@ type FormStepperProps = {
changeActiveStep: (step: number) => void changeActiveStep: (step: number) => void
} }
const steps = [
{ label: 'Overview', subtitle: 'Get Started' },
{ label: 'Advicsories', subtitle: 'Understand your Duties' },
{ label: 'Client Setup', subtitle: 'Execution & Consensus' },
{ label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
{ label: 'Key Generation', subtitle: 'Secure your Keypairs' },
{ label: 'Activation', subtitle: 'Complete Setup' },
]
const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
return ( return (
<Stepper <Stepper
@ -15,54 +24,17 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
connectorStyleConfig={customConnectorStyle} connectorStyleConfig={customConnectorStyle}
style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }}
> >
<Step {steps.map((step, index) => (
label={'Overview'} <Step
className="custom-step" key={index}
onClick={() => changeActiveStep(0)} label={step.label}
completed={activeStep >= 0} className="custom-step"
data-subtitle="Get Started" onClick={() => changeActiveStep(index)}
data-step="Overview" completed={activeStep > index - 1}
/> data-subtitle={step.subtitle}
<Step data-step={step.label}
label="Advicsories" />
className="custom-step" ))}
onClick={() => changeActiveStep(1)}
completed={activeStep > 0}
data-subtitle="Understand your Duties"
data-step="Advicsories"
/>
<Step
label="Client Setup"
className="custom-step"
onClick={() => changeActiveStep(2)}
completed={activeStep > 1}
data-subtitle="Execution & Consensus"
data-step="Advicsories"
/>
<Step
label="Validator Setup"
className="custom-step"
onClick={() => changeActiveStep(3)}
completed={activeStep > 2}
data-subtitle="Validators & Withdrawal"
data-step="Validator Setup"
/>
<Step
label="Key Generation"
className="custom-step"
onClick={() => changeActiveStep(4)}
completed={activeStep > 3}
data-subtitle="Secure your Keypairs"
data-step="Key Generation"
/>
<Step
label="Activation"
className="custom-step"
onClick={() => changeActiveStep(5)}
completed={activeStep > 4}
data-subtitle="Complete Setup"
data-step="Activation"
/>
</Stepper> </Stepper>
) )
} }