50 lines
976 B
TypeScript
50 lines
976 B
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
type FieldType = 'text' | 'email' | 'tel' | 'number' | 'textarea';
|
||
|
|
|
||
|
|
interface FormFieldProps {
|
||
|
|
type: FieldType;
|
||
|
|
placeholder?: string;
|
||
|
|
value?: string;
|
||
|
|
onChange?: (
|
||
|
|
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||
|
|
) => void;
|
||
|
|
name?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const FormField: React.FC<FormFieldProps> = ({
|
||
|
|
type,
|
||
|
|
placeholder,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
name,
|
||
|
|
}) => {
|
||
|
|
const commonClass =
|
||
|
|
'w-full rounded-lg border border-gray-300 p-3 focus:ring-2 focus:ring-red-500 focus:outline-none';
|
||
|
|
|
||
|
|
if (type === 'textarea') {
|
||
|
|
return (
|
||
|
|
<textarea
|
||
|
|
name={name}
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
className={`h-32 resize-none ${commonClass}`}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
type={type}
|
||
|
|
name={name}
|
||
|
|
placeholder={placeholder}
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
className={commonClass}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FormField;
|