Read every line carefully, and always come back here to check if you adhere to every rule stated before assigning me to review your code.
The registration page consists of 4 screens because it uses what we call steppers instead of having all the registration inputs on one screen.
Each of the screens has 3 sections:
- The Step Indicator
- The Body and (this is the part that would be changing in our register page, based on the current step)
- The footer contains the continue button.
So for this page, you will create a component called StepperIndicator which shows what level the user is currently at.
This component should be used as follows:
<StepperIndicator steps={4} currentStep={2} onStepChange={() => console.log("step so so so")} />
You would create components for each of the 4 screens, we can name them like so, StepOne, StepTwo, StepThree, StepFour. The component that shows depends on the step the user is currently at.
If the user is at step = 4, then StepFour component should show.
Also, the button 'Continue' does not change, it's the same all through, but the action it performs depends on the current step the user is at.
Note: StepperIndicator component should be inside the components folder, while the other four components should be directly inside the folder for the Register page. This is because no other page is likely to use these four components again. Its specifically for the Register page.
Read every line carefully, and always come back here to check if you adhere to every rule stated before assigning me to review your code.
The registration page consists of 4 screens because it uses what we call steppers instead of having all the registration inputs on one screen.
Each of the screens has 3 sections:
So for this page, you will create a component called StepperIndicator which shows what level the user is currently at.
This component should be used as follows:
You would create components for each of the 4 screens, we can name them like so, StepOne, StepTwo, StepThree, StepFour. The component that shows depends on the step the user is currently at.
If the user is at step = 4, then StepFour component should show.
Also, the button 'Continue' does not change, it's the same all through, but the action it performs depends on the current step the user is at.
Note:
StepperIndicatorcomponent should be inside thecomponentsfolder, while the other four components should be directly inside the folder for theRegisterpage. This is because no other page is likely to use these four components again. Its specifically for theRegisterpage.