Register Form

import { RegisterForm } from "@/components/ui/register-form";

export default function Example() {
  return <RegisterForm />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const RegisterForm = forwardRef(({ className, onSubmit, ...props }, ref) => {
  const [form, setForm] = useState({ name: "", email: "", password: "", confirmPassword: "" });
  const update = (key) => (e) => setForm({ ...form, [key]: e.target.value });

  const handleSubmit = (e) => { e.preventDefault(); onSubmit?.(form); };

  return (
    <form ref={ref} onSubmit={handleSubmit} className={cn("mx-auto w-full max-w-sm space-y-4", className)} {...props}>
      <div className="text-center">
        <h2 className="text-2xl font-bold">Create account</h2>
        <p className="mt-1 text-sm text-muted-foreground">Get started for free</p>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Full Name</label>
        <input type="text" value={form.name} onChange={update("name")} placeholder="John Doe"
          className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Email</label>
        <input type="email" value={form.email} onChange={update("email")} placeholder="email@example.com"
          className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Password</label>
        <input type="password" value={form.password} onChange={update("password")}
          className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Confirm Password</label>
        <input type="password" value={form.confirmPassword} onChange={update("confirmPassword")}
          className="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
      </div>
      <button type="submit" className="inline-flex h-10 w-full items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground hover:bg-primary/90">
        Create account
      </button>
      <p className="text-center text-sm text-muted-foreground">Already have an account? <a href="#" className="text-primary hover:underline">Sign in</a></p>
    </form>
  );
});
RegisterForm.displayName = "RegisterForm";

export { RegisterForm };