SignupForm

signupform-1779367054752.tsx

'use client';

import { useState } from 'react';

interface SignupFormProps {
  // No props for this component
}

const SignupForm: React.FC<SignupFormProps> = () => {
  const [step, setStep] = useState(1);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [avatar, setAvatar] = useState('');
  const [plan, setPlan] = useState('');

  const handleNext = () => {
    if (step === 1 && email && password) {
      setStep(2);
    } else if (step === 2 && name && avatar) {
      setStep(3);
    }
  };

  const handlePrev = () => {
    if (step > 1) {
      setStep(step - 1);
    }
  };

  const handleSignup = () => {
    // Implement signup logic here
    console.log('Signup successful!');
  };

  return (
    <div className="h-screen bg-zinc-950 flex justify-center items-center">
      <div className="bg-zinc-900 p-8 rounded-lg w-1/2">
        <div className="flex justify-between mb-4">
          <div
            className={`w-1/3 h-1 py-1 ${
              step === 1 ? 'bg-gold' : 'bg-zinc-800'
            } rounded-lg transition-all duration-300`}
          >
            <p className="text-center text-white">Step 1</p>
          </div>
          <div
            className={`w-1/3 h-1 py-1 ${
              step === 2 ? 'bg-gold' : 'bg-zinc-800'
            } rounded-lg transition-all duration-300`}
          >
            <p className="text-center text-white">Step 2</p>
          </div>
          <div
            className={`w-1/3 h-1 py-1 ${
              step === 3 ? 'bg-gold' : 'bg-zinc-800'
            } rounded-lg transition-all duration-300`}
          >
            <p className="text-center text-white">Step 3</p>
          </div>
        </div>
        {step === 1 && (
          <div>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Email"
              className="block w-full p-2 mb-4 rounded-lg bg-zinc-800 text-white"
            />
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Password"
              className="block w-full p-2 mb-4 rounded-lg bg-zinc-800 text-white"
            />
            <button
              onClick={handleNext}
              className="bg-gold py-2 px-4 rounded-lg text-zinc-900"
            >
              Next
            </button>
          </div>
        )}
        {step === 2 && (
          <div>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Name"
              className="block w-full p-2 mb-4 rounded-lg bg-zinc-800 text-white"
            />
            <input
              type="text"
              value={avatar}
              onChange={(e) => setAvatar(e.target.value)}
              placeholder="Avatar"
              className="block w-full p-2 mb-4 rounded-lg bg-zinc-800 text-white"
            />
            <button
              onClick={handlePrev}
              className="bg-zinc-800 py-2 px-4 rounded-lg text-gold mr-4"
            >
              Prev
            </button>
            <button
              onClick={handleNext}
              className="bg-gold py-2 px-4 rounded-lg text-zinc-900"
            >
              Next
            </button>
          </div>
        )}
        {step === 3 && (
          <div>
            <select
              value={plan}
              onChange={(e) => setPlan(e.target.value)}
              className="block w-full p-2 mb-4 rounded-lg bg-zinc-800 text-white"
            >
              <option value="">Select Plan</option>
              <option value="free">Free</option>
              <option value="pro">Pro</option>
            </select>
            <button
              onClick={handlePrev}
              className="bg-zinc-800 py-2 px-4 rounded-lg text-gold mr-4"
            >
              Prev
            </button>
            <button
              onClick={handleSignup}
              className="bg-gold py-2 px-4 rounded-lg text-zinc-900"
            >
              Signup
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default SignupForm;

Component info

CategoryAuthentication

Frameworkreact

TierFREE

Copies0

About

Multi-step signup wizard

More from Authentication

'use client';

import React, { useState } from 'react';

interface LoginFormProps {
  onSubmit: (email: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');

LoginForm

Authentication