Field

"use client";
import { type FormEvent, useState } from "react";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/component";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "@/components/ui/select";
export default function FieldCompleteFormDemo() {
  const [loading, setLoading] = useState(false);
  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    setLoading(true);
    await new Promise((r) => setTimeout(r, 800));
    setLoading(false);
    alert(`Full name: ${formData.get("fullName") || ""}
Email: ${formData.get("email") || ""}
Role: ${formData.get("role") || ""}`);
  };
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm">
        <Form onSubmit={onSubmit}>
          <Field name="fullName">
            <FieldLabel>Full Name <span className="text-destructive-foreground">*</span></FieldLabel>
            <Input placeholder="John Doe" required type="text" />
            <FieldError>Please enter a valid name.</FieldError>
          </Field>
          <Field name="email">
            <FieldLabel>Email <span className="text-destructive-foreground">*</span></FieldLabel>
            <Input placeholder="user@example.com" required type="email" />
            <FieldError>Please enter a valid email.</FieldError>
          </Field>
          <Field name="role">
            <FieldLabel>Role</FieldLabel>
            <Select items={[{ label: "Select your role", value: null }, { label: "Developer", value: "developer" }, { label: "Designer", value: "designer" }, { label: "Product Manager", value: "manager" }, { label: "Other", value: "other" }]}>
              <SelectTrigger><SelectValue /></SelectTrigger>
              <SelectPopup>
                <SelectItem value="developer">Developer</SelectItem>
                <SelectItem value="designer">Designer</SelectItem>
                <SelectItem value="manager">Product Manager</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectPopup>
            </Select>
            <FieldDescription>This is an optional field</FieldDescription>
          </Field>
          <Field name="newsletter">
            <div className="flex items-center gap-2">
              <Checkbox />
              <FieldLabel className="cursor-pointer">Subscribe to newsletter</FieldLabel>
            </div>
          </Field>
          <Button disabled={loading} type="submit">{loading ? "Submitting…" : "Submit"}</Button>
        </Form>
      </div>
    </div>
  );
}