I need a bit of Help with my Stepper Layout code | Next.js | Page 1

boreal breach Jan 17, 2024, 12:23 AM

#

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;```

earnest juncoBOT Jan 17, 2024, 12:23 AM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

boreal breach Jan 17, 2024, 5:16 PM

#

UP

grave loom Jan 17, 2024, 5:20 PM

#

boreal breach UP

where do you want the line to place?

boreal breach Jan 17, 2024, 5:21 PM

#

#

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.

grave loom Jan 17, 2024, 5:26 PM

#

ok hold on let me see

grave loom Jan 17, 2024, 5:33 PM

#

boreal breach

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>

boreal breach Jan 17, 2024, 5:40 PM

#

grave loom try this ```ts <div className="flex justify-center items-center mb-4"> {st...

Thank you very much. It looks like this now

#

It's a bit better at least the lines are between the steps 😄

grave loom Jan 17, 2024, 5:41 PM

#

boreal breach Thank you very much. It looks like this now

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>

boreal breach Jan 17, 2024, 5:41 PM

#

grave loom oh try this ```ts <div className="flex justify-center items-center mb-4"> ...

Now they're gone

grave loom Jan 17, 2024, 5:43 PM

#

ok wait

grave loom Jan 17, 2024, 5:44 PM

#

boreal breach Now they're gone

<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>

boreal breach Jan 17, 2024, 5:48 PM

#

grave loom ok wait

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 ?

grave loom Jan 17, 2024, 5:49 PM

#

you could change h-1 to h-0.5

boreal breach Jan 17, 2024, 5:49 PM

#

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

grave loom Jan 17, 2024, 5:50 PM

#

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

grave loom Jan 17, 2024, 5:50 PM

#

boreal breach Oh by the way thank you very much for adding comments (it makes it easier for me...

i didn't add comment, I just copied your code 😆

boreal breach Jan 17, 2024, 5:50 PM

#

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

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.

grave loom Jan 17, 2024, 5:52 PM

#

  <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

boreal breach Jan 17, 2024, 5:53 PM

#

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

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```

grave loom Jan 17, 2024, 5:53 PM

#

yeah the stepNames is here

boreal breach Jan 17, 2024, 5:53 PM

#

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

grave loom Jan 17, 2024, 5:59 PM

#

yes I think this is the way we did in react

#

with nextjs, we have another way to do this

boreal breach Jan 17, 2024, 5:59 PM

#

Hmm the stepper looks kinda ugly for some reason.

#

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

grave loom Jan 17, 2024, 6:00 PM

#

lol

#

let me rewrite it

boreal breach Jan 17, 2024, 6:01 PM

#

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

grave loom Jan 17, 2024, 6:19 PM

#

boreal breach Sort of like this

  <>
            <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>
          </>

grave loom Jan 17, 2024, 6:20 PM

#

boreal breach ```js return ( <div className="flex flex-col flex-grow w-full"> ...

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

boreal breach Jan 17, 2024, 6:27 PM

#

grave loom ```ts <> <div className="flex justify-center items-center mb-2 px-...

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.

grave loom Jan 17, 2024, 6:29 PM

#

boreal breach And in my prototype both the form and the stepper are thinner. So the way I had ...

 <>
            <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>
          </>

boreal breach Jan 17, 2024, 6:30 PM

#

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

grave loom Jan 17, 2024, 6:31 PM

#

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

boreal breach Jan 17, 2024, 6:32 PM

#

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

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)

grave loom Jan 17, 2024, 6:34 PM

#

boreal breach It's 360px+48px in my code. And in my prototype is: 590px for the form and 570p...

<>
            <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>
          </>

boreal breach Jan 17, 2024, 6:35 PM

#

grave loom ```ts <> <div className="flex justify-center items-center mb-2 px-8 ...

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.

boreal breach Jan 17, 2024, 6:39 PM

#

grave loom with nextjs, we have another way to do this

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 ?

grave loom Jan 17, 2024, 6:44 PM

#

boreal breach Haha you know what, forget about the stepper being smaller than the form, I'm ok...

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>

boreal breach Jan 17, 2024, 6:45 PM

#

grave loom try again with this ```ts <div className="flex justify-between items-center mb-...

Hmm

#

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

Tenor

grave loom Jan 17, 2024, 6:46 PM

#

boreal breach And also what does this code do ? ```js {/* Navigation buttons */} ...

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

boreal breach Jan 17, 2024, 6:46 PM

#

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

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

grave loom Jan 17, 2024, 6:47 PM

#

boreal breach Hmm

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

boreal breach Jan 17, 2024, 6:48 PM

#

grave loom try again with this ```ts <div className="flex justify-between items-center mb-...

// 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;```

grave loom Jan 17, 2024, 6:48 PM

#

yea look good

boreal breach Jan 17, 2024, 6:49 PM

#

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

#

grave loom Jan 17, 2024, 6:50 PM

#

boreal breach

 <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>

boreal breach Jan 17, 2024, 6:50 PM

#

It's all good now

grave loom Jan 17, 2024, 6:50 PM

#

grave loom ```ts <div className="flex justify-between items-center mb-4 relative w-full ga...

try this

boreal breach Jan 17, 2024, 6:50 PM

#

grave loom try this

Wow

#

#

This is 1 on 1 with my prototype 😮

earnest juncoBOT Jan 17, 2024, 6:50 PM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1196972948708401173 message)

boreal breach Jan 17, 2024, 6:51 PM

#

You sir are a legend

grave loom Jan 17, 2024, 6:51 PM

#

boreal breach

ok lol gotta go now

#

see you later

boreal breach Jan 17, 2024, 6:52 PM

#

grave loom see you later

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

Tenor

#

Anyway it's indeed almost there, I just have to change the colours and play a bit with it, it actually is very close! 👌🏻

boreal breach Jan 17, 2024, 8:00 PM

#

grave loom with nextjs, we have another way to do this

@grave loom 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;

grave loom Jan 18, 2024, 6:10 AM

#

boreal breach <@743561772069421169> when you have some time can you please let me know what yo...

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

#I need a bit of Help with my Stepper Layout code