Frontend form handling done

2025-07-05 21:11:09 +03:00
parent 58d53b17cb
commit a42e61fb48
22 changed files with 338 additions and 35 deletions
@@ -0,0 +1,48 @@
+import { useFieldContext } from "@/hooks/formHook";
+import { cn } from "@/lib/utils";
+import { Input } from "../ui/input";
+
+// --- field components ---
+interface TextFieldProps {
+    placeholder?: string;
+    label?: string;
+    type?: React.ComponentProps<"input">["type"];
+    className?: string;
+}
+
+export default function TextField({
+    placeholder,
+    type = "text",
+    className = "",
+    label = "",
+}: TextFieldProps) {
+    // Get field with predefined text type
+    const field = useFieldContext<string>();
+
+    // Render custom field
+    return (
+        <div className={cn("flex flex-col", className)}>
+            {label && (
+                <label htmlFor={field.name} className="ml-1 mb-2 text-secondary-foreground text-sm">
+                    {label}
+                </label>
+            )}
+
+            <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type={type}
+                placeholder={placeholder || `${type} input`}
+            />
+
+            {!field.state.meta.isValid && (
+                <span className="text-xs text-danger mt-1">
+                    {field.state.meta.errors.map((e) => e.message).join(", ")}
+                </span>
+            )}
+        </div>
+    );
+}