54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
} |