import React from 'react'; type FieldSchemaType = { field: React.ReactElement; errors?: string; }; const FieldSchema: React.FC<FieldSchemaType> = ({ field, errors }) => { return ( <div className="pt-2"> {field} <span className="text-red-500 text-xs">{errors}</span> </div> ); }; type InputFieldProps = { label: string; type: React.HTMLInputTypeAttribute; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; value?: string; required?: boolean; placeholder?: string; }; export const InputField: React.FC<InputFieldProps> = ({ label, type, onChange, value, required, placeholder }) => { const requiredString = required ? '*' : ''; return ( <div className="grid grid-cols-2"> <p> {label} {requiredString} </p> <input type={type} placeholder={placeholder} onChange={onChange} value={value} className="px-1 bg-[#1a1a1a] rounded-sm text-gray-400 border border-[#1a1a1a] placeholder:text-gray-400 focus:outline-none focus:bg-black focus:border-[#4e1183] w-full text-sm " /> </div> ); }; type Props = { label: string; selected: string; options: string[]; onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void; required?: boolean; }; export const SelectField: React.FC<Props> = ({ selected, onChange, options, label, required }) => { const requiredString = required ? '*' : ''; return ( <div className="grid grid-cols-2"> <p> {label} {requiredString} </p> <select value={selected} onChange={onChange} className="bg-[#1a1a1a] text-gray-400 border border-[#1a1a1a] text-sm rounded-sm focus:border-teal-500 outline-none" > {options.map((model) => ( <option key={model} value={model}> {model} </option> ))} </select> </div> ); }; export default FieldSchema;