auth rework

apps/website/components/ui/FormField.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+
+interface FormFieldProps {
+  label: string;
+  icon?: React.ElementType;
+  children: React.ReactNode;
+  required?: boolean;
+  error?: string;
+  hint?: string;
+}
+
+/**
+ * Form field wrapper with label, optional icon, required indicator, and error/hint display.
+ * Used for consistent form field layout throughout the app.
+ */
+export default function FormField({ 
+  label, 
+  icon: Icon, 
+  children,
+  required = false,
+  error,
+  hint,
+}: FormFieldProps) {
+  return (
+    <div className="space-y-2">
+      <label className="block text-sm font-medium text-gray-300">
+        <div className="flex items-center gap-2">
+          {Icon && <Icon className="w-4 h-4 text-gray-500" />}
+          {label}
+          {required && <span className="text-racing-red">*</span>}
+        </div>
+      </label>
+      {children}
+      {error && (
+        <p className="text-xs text-racing-red mt-1">{error}</p>
+      )}
+      {hint && !error && (
+        <p className="text-xs text-gray-500 mt-1">{hint}</p>
+      )}
+    </div>
+  );
+}