I need a bit of Help with my Stepper Layout code

Answered

Sun bear posted this in #help-forum

Sun bearOP

2024-01-17T00:23:10.000Z

I need the lines to be even in terms of size and correctly placed. Here is my current code:

//StepIndicator.tsx
import React from 'react';

const StepIndicator = ({ currentStep, steps }: { currentStep: number, steps: string[] }) => {
    return (
        <div className="flex justify-center items-center mb-4">
            {steps.map((step, index) => (
                <div key={index} className="flex flex-col items-center mx-2">
                    {/* Circle */}
                    <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${index <= currentStep ? 'bg-green-500' : 'bg-white'} border border-gray-300`}>
                        {index + 1}
</div>

{/* Step Name */}
<span className={`text-sm text-center mt-1 ${index <= currentStep ? 'text-green-500' : 'text-white'}`}>
{step}
</span>
</div>
            ))}
            {steps.slice(0, -1).map((_, index) => (
<div key={index} className={`h-1 w-12 bg-gray-300 mx-2`}></div>
            ))}
        </div>
    );
}

export default StepIndicator;

Answered by Ray

 <div className="flex justify-between items-center mb-4 relative w-full gap-2 px-2">
              <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div>
              {steps.map((step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)]  flex justify-center items-center">
                      <div
                        className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                          index <= currentStep ? "bg-green-500" : "bg-white"
                        } border border-gray-300`}
                      >
                        {index + 1}
                      </div>
                    </div>

                    {/* Step Name */}
                    <span
                      className={`text-xs text-center mt-1 ${
                        index <= currentStep ? "text-green-500" : "text-white"
                      }`}
                    >
                      {step}
                    </span>
                  </div>
                </>
              ))}
            </div>

View full answer

94 Replies

Sun bearOP

2024-01-17T17:16:47.000Z

@Sun bear UP

Ray

2024-01-17T17:20:39.000Z

where do you want the line to place?

Sun bearOP

2024-01-17T17:21:48.000Z

Also hello Ray! ðŸ‘‹ðŸ»

I also want the lines length to always be even no matter how long the word behind each step is. As in I want it to be responsive (cause my app is multi langual) so in some languages personal details may take more space. Maybe the circles and the name of the steps need to be put in their own columns which are width limited and if the string is bigger than a certain legth the text should go on another row ?

I'm not really sure how to go about that. And I also want the space between the text to be even (as seen in my screenshot) no matter the length of the text (so that the stepper looks esthetically pleasing to look at)

 return (
        <div className="flex flex-col flex-grow w-full">
            <div className="flex flex-col flex-grow justify-center items-center">
                <div
                    style={{
                        backgroundColor: 'var(--foreground)',
                        border: '0.2px solid var(--border)',
                        borderRadius: '12px',
                        padding: '24px',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        maxWidth: 'calc(360px + 48px)'
                    }}
                >

                    {/* Step Indicator */}
                    <StepIndicator currentStep={currentStep} steps={stepNames} />

                    {/* Render the current step within the styled container */}
                    {steps[currentStep]}

                    {/* Navigation buttons */}
                    {currentStep > 0 && (
                        <button
                            type="button"
                            className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
                            onClick={() => setCurrentStep(currentStep - 1)}
                        >
                            Back
                        </button>
                    )}
                    {currentStep < steps.length - 1 && (
                        <button
                            type="button"
                            className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
                            onClick={() => setCurrentStep(currentStep + 1)}
                        >
                            Continue
                        </button>
                    )}

This is the signup page layout in which I am using the step, if it helps.

Ray

2024-01-17T17:26:47.000Z

ok hold on let me see

@Sun bear Click to see attachment

Ray

2024-01-17T17:33:43.000Z

try this

<div className="flex justify-center items-center mb-4">
      {steps.map((step, index) => (
        <>
          <div key={index} className="flex flex-col items-center mx-2">
            {/* Circle */}
            <div
              className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                index <= currentStep ? "bg-green-500" : "bg-white"
              } border border-gray-300`}
            >
              {index + 1}
            </div>

            {/* Step Name */}
            <span
              className={`text-sm text-center mt-1 ${
                index <= currentStep ? "text-green-500" : "text-white"
              }`}
            >
              {step}
            </span>
          </div>
          {index + 1 < steps.length && (
            <div key={index} className={`h-1 w-12 bg-gray-300 mx-2 mb-4`}></div>
          )}
        </>
      ))}
    </div>

@Ray try this ts <div className="flex justify-center items-center mb-4"> {steps.map((step, index) => ( <> <div key={index} className="flex flex-col items-center mx-2"> {/* Circle */} <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> {/* Step Name */} <span className={`text-sm text-center mt-1 ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> </div> {index + 1 < steps.length && ( <div key={index} className={`h-1 w-12 bg-gray-300 mx-2 mb-4`}></div> )} </> ))} </div>

Sun bearOP

2024-01-17T17:40:18.000Z

Thank you very much. It looks like this now

It's a bit better at least the lines are between the steps ðŸ˜„

@Sun bear Thank you very much. It looks like this now

Ray

2024-01-17T17:41:11.000Z

oh try this

 <div className="flex justify-center items-center mb-4">
      {steps.map((step, index) => (
        <>
          <div key={index} className="flex flex-col items-center mx-2">
            {/* Circle */}
            <div
              className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                index <= currentStep ? "bg-green-500" : "bg-white"
              } border border-gray-300`}
            >
              {index + 1}
            </div>

            {/* Step Name */}
            <span
              className={`text-sm text-center mt-1 ${
                index <= currentStep ? "text-green-500" : "text-white"
              }`}
            >
              {step}
            </span>
          </div>
          {index + 1 < steps.length && (
            <div
              key={index}
              className={`h-1 flex-1 bg-gray-300 mx-2 mb-4`}
            ></div>
          )}
        </>
      ))}
    </div>

@Ray oh try this ts <div className="flex justify-center items-center mb-4"> {steps.map((step, index) => ( <> <div key={index} className="flex flex-col items-center mx-2"> {/* Circle */} <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> {/* Step Name */} <span className={`text-sm text-center mt-1 ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> </div> {index + 1 < steps.length && ( <div key={index} className={`h-1 flex-1 bg-gray-300 mx-2 mb-4`} ></div> )} </> ))} </div>

Sun bearOP

2024-01-17T17:41:52.000Z

Now they're gone

Ray

2024-01-17T17:43:08.000Z

ok wait

@Sun bear Now they're gone

Ray

2024-01-17T17:44:50.000Z

<div className="flex justify-center items-center mb-4">
            {steps.map((step, index) => (
              <>
                <div key={index} className="flex flex-col items-center mx-2">
                  {/* Circle */}
                  <div
                    className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                      index <= currentStep ? "bg-green-500" : "bg-white"
                    } border border-gray-300`}
                  >
                    {index + 1}
                  </div>

                  {/* Step Name */}
                  <span
                    className={`text-sm text-center mt-1 ${
                      index <= currentStep ? "text-green-500" : "text-white"
                    }`}
                  >
                    {step}
                  </span>
                </div>
                {index + 1 < steps.length && (
                  <div
                    key={index}
                    className={`h-1 w-full bg-gray-300 mx-2 mb-4`}
                  ></div>
                )}
              </>
            ))}
          </div>

@Ray ok wait

Sun bearOP

2024-01-17T17:48:24.000Z

Hmm it's almost there. I think I need the lines thickness to be like in my screenshot, maybe double that so it's a bit thicker and the stepper seems a bit not centred currrently and how can I change the step names for the other 2 steps ?

Also how is the stepper aware of which step the user is currently on ?

Ray

2024-01-17T17:49:04.000Z

you could change h-1 to h-0.5

Sun bearOP

2024-01-17T17:49:28.000Z

Oh by the way thank you very much for adding comments (it makes it easier for me to understand the code)

Ray

2024-01-17T17:50:14.000Z

where is your steps defined? I think you could change the name there

@Sun bear Oh by the way thank you very much for adding comments (it makes it easier for me to understand the code)

Ray

2024-01-17T17:50:39.000Z

i didn't add comment, I just copied your code ðŸ˜†

@Ray where is your `steps` defined? I think you could change the name there

Sun bearOP

2024-01-17T17:50:50.000Z

First of all here is how I have the signup page structured.

The personal information.tsx is basically my form component for the first step but I will create 2 more components for the other steps.

I'm not sure how the stepper will know which step belongs to which component, when it should be active and also how will it know when a step has been completed or not.

Ray

2024-01-17T17:53:00.000Z

  <span
    className={`text-sm text-center mt-1 ${
      index <= currentStep ? "text-green-500" : "text-white"
    }`}
  >
    {step}
  </span>

here if index <= currentStep the text color will be green

@Ray where is your `steps` defined? I think you could change the name there

Sun bearOP

2024-01-17T17:53:06.000Z

I think it's defined on my signup page here:

//components/sign-up-page/sign-up-form.tsx

"use client";
import React, { useState, ChangeEvent } from 'react';
import PersonalInformation from './personal-information';
import type { Dictionary } from '@/app/translation/dictionaryTypes';
import useMounted from '@/hooks/useMounted';
import StepIndicator from './step-indicator';

const SignUpForm = ({ dictionary }: { dictionary: Dictionary }) => {
    const mounted = useMounted();
    // State to manage form steps
    const [currentStep, setCurrentStep] = useState(0);

    // Define the structure of your form data
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        email: '',
        password: ''
    });

    // Handle change in form fields
    const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    // Define the components for each step
    const steps = [
        <PersonalInformation data={formData} handleChange={handleChange} />,
        // Add other steps here as needed...
    ];

    const signUp = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        // Implement sign-up logic with formData here
    };

    const stepNames = ["Personal Information", "Step 2", "Step 3"]; // Update names as needed

    if (!mounted) return null;  // Only render component after it's mounted

Ray

2024-01-17T17:53:18.000Z

yeah the stepNames is here

Sun bearOP

2024-01-17T17:53:35.000Z

Oh I see it now!

It was written by Chat Gpt so I also wanted you to verify if this is correct

Is this the correct way to do it for production or do you think I should optimise anything for the stepper ?

Like what I mean to ask is is this code decent ?

The idea is for the website to store the information somewhere until the user clicks on the submit button on the last step which I will create and only then to send the data to my database (that's what I've been told to do for when using SSR)

So at each step I suppose I need a function that does that that is tied to the "continue" button I suppose and then on the last step I will need to create a "submit" button which will take all that information and send it to my database but I'm not sure what functions I should use for the "Continue" button which will be present on both Step 1 and 2 and for the "Submit" button or "Create Your Account" button which will be present at Step 3 (the last step)

And the Stepper currently looks like this

Ray

2024-01-17T17:59:07.000Z

yes I think this is the way we did in react

with nextjs, we have another way to do this

Sun bearOP

2024-01-17T17:59:46.000Z

Hmm the stepper looks kinda ugly for some reason.

It doesn't look as good as I have it in my prototype

Ray

2024-01-17T18:00:26.000Z

lol

let me rewrite it

Sun bearOP

2024-01-17T18:01:09.000Z

I'm sorry haha I'm a bit of a perfectionist ðŸ˜„

As you can see when a step is active it turns green, when it's not active it's grey. I will then later create some tailwind colours to match the ones in my prototype but as long as the functionality is in place I can do that myself later since I have now learned how to do that. I just need to define the colours in my globals.css and then put them in my tailwind config.

Oh and I am using next themes so I guess if I will be using 2 different shades of green (one for light mode and one for dark mode) it should automatically swap between them when the mode is changed, same for the text I suppose. The text basically follows the same rules as you can see from my screenshot.

And it should be the same for the lines between the circles

Since in light mode the lines would be a bit brighter and in dark mode they would be a bit darker.

I was thinking to do it like this instead:

The current active step is white (or black, depending on the light scheme) by default, until the step information has been fileld)
Then when the user proceeds to the next step the previous step turns green
Meanwhile the last step would be grey since it's not reachable until the steps before it would be completed.

So basically:

if Step = Active -> Use White
if Step = Completed -> Use Green
if Step = Not Reached Yet -> Use Gray

And these would be colours from my tailwind as in --green / --white / --grey

Sort of like this

@Sun bear Sort of like this

Ray

2024-01-17T18:19:35.000Z

  <>
            <div className="flex justify-center items-center mb-2 px-10 w-full">
              {steps.map((_step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center mx-2">
                    {/* Circle */}
                    <div
                      className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                        index <= currentStep ? "bg-green-500" : "bg-white"
                      } border border-gray-300`}
                    >
                      {index + 1}
                    </div>
                  </div>
                  {index + 1 < steps.length && (
                    <div
                      key={index}
                      className={`h-0.5 w-full bg-gray-300`}
                    ></div>
                  )}
                </>
              ))}
            </div>
            {/* Step Name */}
            <div className="flex justify-between items-center w-full gap-8">
              {steps.map((step, index) => (
                <span
                  key={index}
                  className={`text-sm text-center ${
                    index <= currentStep ? "text-green-500" : "text-white"
                  }`}
                >
                  {step}
                </span>
              ))}
            </div>
          </>

@Sun bear js return ( <div className="flex flex-col flex-grow w-full"> <div className="flex flex-col flex-grow justify-center items-center"> <div style={{ backgroundColor: 'var(--foreground)', border: '0.2px solid var(--border)', borderRadius: '12px', padding: '24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', maxWidth: 'calc(360px + 48px)' }} > {/* Step Indicator */} <StepIndicator currentStep={currentStep} steps={stepNames} /> {/* Render the current step within the styled container */} {steps[currentStep]} {/* Navigation buttons */} {currentStep > 0 && ( <button type="button" className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2" onClick={() => setCurrentStep(currentStep - 1)} > Back </button> )} {currentStep < steps.length - 1 && ( <button type="button" className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2" onClick={() => setCurrentStep(currentStep + 1)} > Continue </button> )} This is the signup page layout in which I am using the step, if it helps.

Ray

2024-01-17T18:20:02.000Z

change the maxWidth here to maxWidth: "calc(480px + 48px)",

@Ray ts <> <div className="flex justify-center items-center mb-2 px-10 w-full"> {steps.map((_step, index) => ( <> <div key={index} className="flex flex-col items-center mx-2"> {/* Circle */} <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> </div> {index + 1 < steps.length && ( <div key={index} className={`h-0.5 w-full bg-gray-300`} ></div> )} </> ))} </div> {/* Step Name */} <div className="flex justify-between items-center w-full gap-8"> {steps.map((step, index) => ( <span key={index} className={`text-sm text-center ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> ))} </div> </>

Sun bearOP

2024-01-17T18:27:07.000Z

Hmm

It's close but the stepper is suppsoed to be smaller than the form itself

And in my prototype both the form and the stepper are thinner. So the way I had my form before was good I don't want to increase it to be fat like it currently is now.

@Sun bear And in my prototype both the form and the stepper are thinner. So the way I had my form before was good I don't want to increase it to be fat like it currently is now.

Ray

2024-01-17T18:29:32.000Z

 <>
            <div className="flex justify-center items-center mb-2 px-8 w-full">
              {steps.map((_step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center mx-2">
                    {/* Circle */}
                    <div
                      className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                        index <= currentStep ? "bg-green-500" : "bg-white"
                      } border border-gray-300`}
                    >
                      {index + 1}
                    </div>
                  </div>
                  {index + 1 < steps.length && (
                    <div
                      key={index}
                      className={`h-0.5 w-full bg-gray-300`}
                    ></div>
                  )}
                </>
              ))}
            </div>
            {/* Step Name */}
            <div className="flex justify-between items-center w-full gap-8 mb-4">
              {steps.map((step, index) => (
                <span
                  key={index}
                  className={`text-xs text-center ${
                    index <= currentStep ? "text-green-500" : "text-white"
                  }`}
                >
                  {step}
                </span>
              ))}
            </div>
          </>

Sun bearOP

2024-01-17T18:30:41.000Z

Wow, uhh almost there. I just need it to be like 1-3px thinner than the length of the input fields.

In width I mean

Like here

Ray

2024-01-17T18:31:21.000Z

yeah you could adjust that, I don't know the width of your form

@Ray yeah you could adjust that, I don't know the width of your form

Sun bearOP

2024-01-17T18:32:44.000Z

It's 360px+48px in my code.

And in my prototype is: 590px for the form and 570px for the stepper (but I'm using Adobe XD so those values are probably different in CSS)

@Sun bear It's 360px+48px in my code. And in my prototype is: 590px for the form and 570px for the stepper (but I'm using Adobe XD so those values are probably different in CSS)

Ray

2024-01-17T18:34:30.000Z

<>
            <div className="flex justify-center items-center mb-2 px-8 w-full">
              {steps.map((_step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center mx-2">
                    {/* Circle */}
                    <div
                      className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                        index <= currentStep ? "bg-green-500" : "bg-white"
                      } border border-gray-300`}
                    >
                      {index + 1}
                    </div>
                  </div>
                  {index + 1 < steps.length && (
                    <div
                      key={index}
                      className={`h-0.5 w-full bg-gray-300`}
                    ></div>
                  )}
                </>
              ))}
            </div>
            {/* Step Name */}
            <div className="flex justify-between items-center w-full gap-8 mb-4 tracking-tight">
              {steps.map((step, index) => (
                <span
                  key={index}
                  className={`text-xs text-center ${
                    index <= currentStep ? "text-green-500" : "text-white"
                  }`}
                >
                  {step}
                </span>
              ))}
            </div>
          </>

@Ray ts <> <div className="flex justify-center items-center mb-2 px-8 w-full"> {steps.map((_step, index) => ( <> <div key={index} className="flex flex-col items-center mx-2"> {/* Circle */} <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> </div> {index + 1 < steps.length && ( <div key={index} className={`h-0.5 w-full bg-gray-300`} ></div> )} </> ))} </div> {/* Step Name */} <div className="flex justify-between items-center w-full gap-8 mb-4 tracking-tight"> {steps.map((step, index) => ( <span key={index} className={`text-xs text-center ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> ))} </div> </>

Sun bearOP

2024-01-17T18:35:27.000Z

Hmm, nothing changed. Also the text for the steps is no longer centred against its step circle

If you look at choose your plan the circle is offseted to the left, they are no longer centred aligned to each other

Haha you know what, forget about the stepper being smaller than the form, I'm okay with how it is, let's just fix this issue and it's all good. I've already took too much of your time and I apologise.

@Ray with nextjs, we have another way to do this

Sun bearOP

2024-01-17T18:39:45.000Z

And then just let me know about this if you have some time.

And also what does this code do ?

 {/* Navigation buttons */}
                    {currentStep > 0 && (
                        <button
                            type="button"
                            className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
                            onClick={() => setCurrentStep(currentStep - 1)}
                        >
                            Back
                        </button>
                    )}
                    {currentStep < steps.length - 1 && (
                        <button
                            type="button"
                            className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2"
                            onClick={() => setCurrentStep(currentStep + 1)}
                        >
                            Continue
                        </button>
                    )}

It says navigation buttons but ehh I don't see any navigation buttons in my page or a back button. It looks like this part of the code is dead for some reason.

Should I delete it ?

@Sun bear Haha you know what, forget about the stepper being smaller than the form, I'm okay with how it is, let's just fix this issue and it's all good. I've already took too much of your time and I apologise.

Ray

2024-01-17T18:45:00.000Z

try again with this

 <div className="flex justify-between items-center mb-4 relative w-full gap-2">
              <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div>
              {steps.map((step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)]  flex justify-center items-center">
                      <div
                        className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                          index <= currentStep ? "bg-green-500" : "bg-white"
                        } border border-gray-300`}
                      >
                        {index + 1}
                      </div>
                    </div>

                    {/* Step Name */}
                    <span
                      className={`text-xs text-center mt-1 ${
                        index <= currentStep ? "text-green-500" : "text-white"
                      }`}
                    >
                      {step}
                    </span>
                  </div>
                </>
              ))}
            </div>

@Ray try again with this ts <div className="flex justify-between items-center mb-4 relative w-full gap-2"> <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div> {steps.map((step, index) => ( <> <div key={index} className="flex flex-col items-center"> {/* Circle */} <div className="px-2 z-[1] bg-[var(--foreground)] flex justify-center items-center"> <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> </div> {/* Step Name */} <span className={`text-xs text-center mt-1 ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> </div> </> ))} </div>

Sun bearOP

2024-01-17T18:45:38.000Z

Hmm

https://tenor.com/view/perfection-perfect-michael-fassbender-magneto-x-men-first-class-gif-2260686001358167676

@Sun bear And also what does this code do ? js {/* Navigation buttons */} {currentStep > 0 && ( <button type="button" className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2" onClick={() => setCurrentStep(currentStep - 1)} > Back </button> )} {currentStep < steps.length - 1 && ( <button type="button" className="bg-blue-500 rounded-md w-full px-4 py-2 text-foreground mb-2" onClick={() => setCurrentStep(currentStep + 1)} > Continue </button> )} It says navigation buttons but ehh I don't see any navigation buttons in my page or a back button. It looks like this part of the code is dead for some reason.

Ray

2024-01-17T18:46:16.000Z

this show continue button and back button if current step is > 1

@Ray this show continue button and back button if current step is > 1

Sun bearOP

2024-01-17T18:46:58.000Z

Ohh then that explains it since I haven't implemented the other 2 forms yet so I never got to the second step.

@Sun bear Hmm

Ray

2024-01-17T18:47:14.000Z

did you paste the code correctly? why is there 4 step lol

Sun bearOP

2024-01-17T18:48:03.000Z

// components/sign-up-page/StepIndicator.tsx
import React from 'react';

const StepIndicator = ({ currentStep, steps }: { currentStep: number, steps: string[] }) => {
    return (
        <>
         <div className="flex justify-between items-center mb-4 relative w-full gap-2">
              <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div>
              {steps.map((step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)]  flex justify-center items-center">
                      <div
                        className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                          index <= currentStep ? "bg-green-500" : "bg-white"
                        } border border-gray-300`}
                      >
                        {index + 1}
                      </div>
                    </div>

                    {/* Step Name */}
                    <span
                      className={`text-xs text-center mt-1 ${
                        index <= currentStep ? "text-green-500" : "text-white"
                      }`}
                    >
                      {step}
                    </span>
                  </div>
                </>
              ))}
            </div>
      </>
    )
}

export default StepIndicator;

Ray

2024-01-17T18:48:30.000Z

yea look good

Sun bearOP

2024-01-17T18:49:06.000Z

I had to restart the server, it was not updating for some reason

It's all good now

@Sun bear Click to see attachment

Ray

2024-01-17T18:50:03.000Z

 <div className="flex justify-between items-center mb-4 relative w-full gap-2 px-2">
              <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div>
              {steps.map((step, index) => (
                <>
                  <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)]  flex justify-center items-center">
                      <div
                        className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${
                          index <= currentStep ? "bg-green-500" : "bg-white"
                        } border border-gray-300`}
                      >
                        {index + 1}
                      </div>
                    </div>

                    {/* Step Name */}
                    <span
                      className={`text-xs text-center mt-1 ${
                        index <= currentStep ? "text-green-500" : "text-white"
                      }`}
                    >
                      {step}
                    </span>
                  </div>
                </>
              ))}
            </div>

Answer

@Ray ts <div className="flex justify-between items-center mb-4 relative w-full gap-2 px-2"> <div className="absolute left-12 right-12 top-2.5 h-0.5 bg-gray-300"></div> {steps.map((step, index) => ( <> <div key={index} className="flex flex-col items-center"> {/* Circle */} <div className="px-2 z-[1] bg-[var(--foreground)] flex justify-center items-center"> <div className={`h-6 w-6 rounded-full flex items-center justify-center text-xs ${ index <= currentStep ? "bg-green-500" : "bg-white" } border border-gray-300`} > {index + 1} </div> </div> {/* Step Name */} <span className={`text-xs text-center mt-1 ${ index <= currentStep ? "text-green-500" : "text-white" }`} > {step} </span> </div> </> ))} </div>

Ray

2024-01-17T18:50:13.000Z

try this

@Ray try this

Sun bearOP

2024-01-17T18:50:28.000Z

Wow

This is 1 on 1 with my prototype ðŸ˜®

You sir are a legend

@Sun bear Click to see attachment

Ray

2024-01-17T18:51:13.000Z

ok lol gotta go now

see you later

@Ray see you later

Sun bearOP

2024-01-17T18:52:03.000Z

See you later and thank you very much for helping me out Ray and being patient with me ðŸ™ðŸ»

Ughh I was looking at my prototype lol. Here's how the actual result in the code looks.

https://tenor.com/view/facepalm-hopeless-really-seriously-embarrassed-gif-23205485

Anyway it's indeed almost there, I just have to change the colours and play a bit with it, it actually is very close! ðŸ‘ŒðŸ»

@Ray with nextjs, we have another way to do this

Sun bearOP

2024-01-17T20:00:40.000Z

@Ray when you have some time can you please let me know what you meant here ?
It would help me a lot with knowing how I am supposed to store the data.

I have already created my Continue button and second step.

I am basically trying to understand what I need to do when the "Continue" button is pressed and what I need to do when the "Create your Account" button is pressed.

The continue button is the button that navigates to the next step, the other button is the last button that one only appears on the last page/step and is supposed to create the account.

Here is my current code

//components/sign-up-page/sign-up-form.tsx

"use client";
import React, { useState, ChangeEvent } from 'react';
import PersonalInformation from './personal-information';
import AccountDetails from './account-details';
import type { Dictionary } from '@/app/translation/dictionaryTypes';
import useMounted from '@/hooks/useMounted';
import StepIndicator from './step-indicator';

const SignUpForm = ({ dictionary }: { dictionary: Dictionary }) => {
    const mounted = useMounted();

    const [currentStep, setCurrentStep] = useState(0);

    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        country: '',
        dateOfBirth: '',
        email: '',
        confirmEmail: '',
        password: '',
        confirmPassword: ''
    });

    const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const steps = [
        <PersonalInformation data={formData} handleChange={handleChange} />,
        <AccountDetails data={formData} handleChange={handleChange} />,
    ];

    const signUp = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
    };

    const stepNames = ["Personal Details", "Account Details", "Choose Your Plan"];

    if (!mounted) return null;

Basically I would like to know what would be the recommended way to store the data the user inputs for each step and where to store it and how to get it back for when the user completes the last step and presses the account creation button and how to deal with updating the data in case the user decides to go back to a previous step and edit it and also I need the data to be filled if the user goes back to a previous step, like not only do I need to store it somewhere but also retrieve it so that the user doesn't have to retype it again in case they go back to a previous step and of course the data needs to be retrieved from where it's stored once more when the user presses the create your account button.

I can create a new thread if needed by the way and I will wait, don't worry, you don't have to reply now.

This is how my form looks at the moment, as you can see I have already updated it and added that continue button.

And this is my current code for the stepper:

import React from 'react';

const StepIndicator = ({ currentStep, steps }: { currentStep: number, steps: string[] }) => {
    return (
        <div className="flex justify-between items-center mb-4 relative w-full gap-2 px-2 font-roboto">
            {/* Use inline style for custom height */}
            <div className="absolute left-12 right-12 top-2.5 bg-gray-300" style={{ height: '0.04rem' }}></div> 
            {steps.map((step, index) => (
                <div key={index} className="flex flex-col items-center">
                    {/* Circle */}
                    <div className="px-2 z-[1] bg-[var(--foreground)] flex justify-center items-center">
                        <div
                            className={`h-5 w-5 rounded-full flex items-center justify-center text-xs ${
                                index <= currentStep ? 'bg-[var(--brand-green)] text-[var(--text-bright)]' : 'bg-[var(--border)] text-[var(--text-dimmed)]'
                            }`}
                        >
                            {index + 1}
                        </div>
                    </div>

                    {/* Step Name */}
                    <span
                        className={`text-xs text-center mt-1 ${
                            index <= currentStep ? 'text-[var(--text-bright)]' : 'text-[var(--text-dimmed)]'
                        }`}
                    >
                        {step}
                    </span>
                </div>
            ))}
        </div>
    );
}

export default StepIndicator;

@Sun bear <@743561772069421169> when you have some time can you please let me know what you meant here ? It would help me a lot with knowing how I am supposed to store the data. I have already created my Continue button and second step. I am basically trying to understand what I need to do when the "Continue" button is pressed and what I need to do when the "Create your Account" button is pressed. The continue button is the button that navigates to the next step, the other button is the last button that one only appears on the last page/step and is supposed to create the account. Here is my current code js //components/sign-up-page/sign-up-form.tsx "use client"; import React, { useState, ChangeEvent } from 'react'; import PersonalInformation from './personal-information'; import AccountDetails from './account-details'; import type { Dictionary } from '@/app/translation/dictionaryTypes'; import useMounted from '@/hooks/useMounted'; import StepIndicator from './step-indicator'; const SignUpForm = ({ dictionary }: { dictionary: Dictionary }) => { const mounted = useMounted(); const [currentStep, setCurrentStep] = useState(0); const [formData, setFormData] = useState({ firstName: '', lastName: '', country: '', dateOfBirth: '', email: '', confirmEmail: '', password: '', confirmPassword: '' }); const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => { const { name, value } = event.target; setFormData({ ...formData, [name]: value }); }; const steps = [ <PersonalInformation data={formData} handleChange={handleChange} />, <AccountDetails data={formData} handleChange={handleChange} />, ]; const signUp = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); }; const stepNames = ["Personal Details", "Account Details", "Choose Your Plan"]; if (!mounted) return null;

Ray

2024-01-18T06:10:06.000Z

in nextjs, we can use dynamic params to render a multiple step form
app/form/[step]/page.tsx and store the data in database and query the data for the step from database if the user have interrupted the process

@Ray in nextjs, we can use dynamic params to render a multiple step form `app/form/[step]/page.tsx` and store the data in database and query the data for the step from database if the user have interrupted the process

Sun bearOP

2024-01-18T17:30:47.000Z

Currently I am noticing that data already stays when I navigate between steps but not if I switch the language.

I have created a new thread in order to continue the discussion so that this thread doesn't get bloated since it's already solved.

#Help With Multi-Form-Sign-Up => Store & Retrieve & Push Data to DataBase/Server