Multi Step Login

import MultiStepLogin from "@/components/ruixen/multi-step-login";
 
const loginSteps = [
  {
    title: "Account Information",
    inputs: [
      {
        id: "email",
        type: "email",
        label: "Email",
        placeholder: "you@example.com",
      },
    ],
    nextLabel: "Continue",
  },
  {
    title: "Security",
    inputs: [
      {
        id: "password",
        type: "password",
        label: "Password",
        placeholder: "********",
      },
    ],
    nextLabel: "Next",
    backLabel: "Back",
  },
  {
    title: "Verification",
    inputs: [
      { id: "code", type: "text", label: "2FA Code", placeholder: "000000" },
    ],
    submitLabel: "Sign In",
    backLabel: "Back",
  },
];
 
export default function App() {
  const handleChange = (values: Record<string, string>) => {
    console.log("Form values:", values);
  };
 
  const handleSubmit = (values: Record<string, string>) => {
    console.log("Login completed:", values);
  };
 
  return (
    <MultiStepLogin
      steps={loginSteps}
      onChange={handleChange}
      onSubmit={handleSubmit}
    />
  );
}

export interface MultiStep {
  title?: string;
  inputs: MultiStepInput[];
  nextLabel?: string;
  backLabel?: string;
  submitLabel?: string;
}
 
export interface MultiStepInput {
  id: string;
  type: string;
  label: string;
  placeholder?: string;
  optional?: boolean;
}