44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
'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>
|
|
);
|
|
} |