Checkout Form

import { CheckoutForm } from "@/components/ui/checkout-form";

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

"use client";

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

const CheckoutForm = forwardRef(({ className, onSubmit, ...props }, ref) => {
  const [form, setForm] = useState({ name: "", address: "", city: "", zip: "", country: "" });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const handleSubmit = (e) => { e.preventDefault(); onSubmit?.(form); };

  const inputCn = "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring";

  return (
    <form ref={ref} onSubmit={handleSubmit} className={cn("space-y-4", className)} {...props}>
      <h3 className="text-lg font-semibold">Shipping Information</h3>
      <div className="space-y-2">
        <label className="text-sm font-medium">Full Name</label>
        <input type="text" value={form.name} onChange={update("name")} className={inputCn} />
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium">Address</label>
        <input type="text" value={form.address} onChange={update("address")} className={inputCn} />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <label className="text-sm font-medium">City</label>
          <input type="text" value={form.city} onChange={update("city")} className={inputCn} />
        </div>
        <div className="space-y-2">
          <label className="text-sm font-medium">ZIP Code</label>
          <input type="text" value={form.zip} onChange={update("zip")} className={inputCn} />
        </div>
      </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">
        Continue to Payment
      </button>
    </form>
  );
});
CheckoutForm.displayName = "CheckoutForm";

export { CheckoutForm };