Login Form

import { LoginForm } from "@/components/ui/login-form";

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

"use client";

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

const LoginForm = forwardRef(({ className, onSubmit, ...props }, ref) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => { e.preventDefault(); onSubmit?.({ email, password }); };

  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">Welcome back</h2>
        <p className="mt-1 text-sm text-muted-foreground">Sign in to your account</p>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Email</label>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} 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">
        <div className="flex items-center justify-between">
          <label className="text-sm font-medium">Password</label>
          <a href="#" className="text-xs text-primary hover:underline">Forgot password?</a>
        </div>
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
          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">
        Sign in
      </button>
      <p className="text-center text-sm text-muted-foreground">Don&apos;t have an account? <a href="#" className="text-primary hover:underline">Sign up</a></p>
    </form>
  );
});
LoginForm.displayName = "LoginForm";

export { LoginForm };