76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
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;
|