2025-02-05 00:07:38 +05:30

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;