frontend: Create Steps Component

[JoelVR17]

Issue - Create Steps Component

You must apply through OnlyDust. If not, you'll be ignored

Description:

Create a fully reusable "Steps" component displayed in a vertical layout. This component should dynamically display the specified number of steps and use Zustand to manage the current active step. For the purposes of this task, please use example components instead of specific Escrow components, as the primary goal is to implement the step functionality.

Example:

Requirements:

1. Create a reusable "Steps" component that can accept a dynamic number of steps as props.
2. Arrange the steps vertically and display the current active step clearly.
3. Use Zustand to manage and track the current active step in the component.
4. Implement placeholder/example components for each step to demonstrate functionality.
5. Ensure the component is easy to integrate with specific components (e.g., Escrow steps) in the future.

Validations:

1. Verify that the component displays the correct number of steps when provided with different numbers of steps as props.
2. Ensure that the current active step can be set and updated using Zustand.
3. Confirm that each step is displayed in a vertical arrangement.
4. Validate that the component behaves as expected with placeholder components.
5. It should works on light / dark mode.
6. Must be fully responsive.

Tests:

1. Test the component by passing different numbers of steps and verify that all steps display correctly.
2. Test Zustand integration by navigating between steps and ensuring the state updates the current active step.
3. Confirm vertical alignment and styling for visual consistency.
4. Test with placeholder components to ensure the component’s reusability.

Recommendation:

For future integration, make the "Steps" component flexible enough to accept specific step components (like Escrow steps) once they are implemented. This will streamline further customization and ensure modular design.

⚠️ Please follow the guidelines for requesting an issue, launching commits, and describing PRs. Otherwise, they will be ignored. ⚠️

[Benjtalkshow]

I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

I can handle this issue.

[KevinMB0220]

Hi, I’m Kevin, part of Dojo Coding, and I have experience in web development using different programming languages. I’ve worked on several web projects and would like to take on this issue, ensuring all provided instructions are followed.

To implement it, I’ll create a reusable Steps component in React that accepts a dynamic number of steps as props. I’ll use Zustand to manage the active step state and ensure the interface is fully functional and responsive. Additionally, I’ll focus on accurately replicating the design, with support for light/dark mode and placeholder components, as outlined in the description.

[martinvibes]

Can I take care of this issue? i'm a frontend dev, and a blockchain dev kindly assign :)

[Michaelkingsdev]

May I handle this issue? I am an experienced frontend developer with 3 years of experience.

[AnoukRImola]

Hi Guys! I'm a Frontend Developer and part of the Dojo. I have experience with this type of implementation.

I would address the requirements of this issue by implementing the store using Zustand to manage the state of the steps. I would create the main components: StepIndicator for displaying the progress, StepContent as the container, and VerticalSteps to orchestrate the conditional rendering logic. Then, I would add responsive styles/design and dark mode, and finally, perform testing and documentation :)

[MullerTheScientist]

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript. i'd love to help on this task

[melnikga]

Can I contribute to this one? Hi, my name is Georgiy, I'm a fullstack blockchain developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga ETA: 2 days

[od-hunter]

Hello, can I be assigned this issue? My experience includes html, css, react, javaScript, typescript, solidity & Cairo.

To solve this issue, I'll take the following steps:

1. I'll use Zustand to manage the currentStep state (setCurrentStep: Set a specific step, nextStep: Increment the current step & previousStep: Decrement the current step).
2. I'll implement steps components.
3. I'll style using CSS.
4. I'll test to ensure Zustand state management updates currentStep correctly when interacting with the navigation buttons or indicators, also to verify that the correct step component renders based on the currentStep and lastly for responsiveness and ensure proper behavior across different screen sizes.

Kindly assign please.

[Amarjeet325]

Could I take a shot at this?

[JoelVR17]

This issue is for you @AnoukRImola! 🚀 Remember to follow all the guidelines, both the ones inside the repository and the guideline to perform the PR.

Many thanks to all the other dev's who sent in their application. 

[JoelVR17]

@AnoukRImola please let me know if you are working on it. If not, to assign it to another developer.