uup

app/components/ui/FormField.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';
+
+interface FormFieldProps {
+  children: ReactNode;
+  label?: string;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+  className?: string;
+  config?: Partial<LayoutConfig>;
+  htmlFor?: string;
+}
+
+export function FormField({
+  children,
+  label,
+  error,
+  helperText,
+  required = false,
+  className = '',
+  config = {},
+  htmlFor,
+}: FormFieldProps) {
+  const layoutConfig = { ...defaultLayoutConfig, ...config };
+  
+  return (
+    <div className={`${className}`} dir={layoutConfig.direction}>
+      {label && (
+        <label 
+          htmlFor={htmlFor}
+          className={`block text-sm font-medium mb-2 ${error ? 'text-red-700' : 'text-gray-700'} ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}
+        >
+          {label}
+          {required && <span className="text-red-500 mr-1">*</span>}
+        </label>
+      )}
+      
+      {children}
+      
+      {error && (
+        <p className={`mt-2 text-sm text-red-600 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {error}
+        </p>
+      )}
+      
+      {helperText && !error && (
+        <p className={`mt-2 text-sm text-gray-500 ${layoutConfig.direction === 'rtl' ? 'text-right' : 'text-left'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+}