59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React, {
|
|
FC, HTMLInputTypeAttribute,
|
|
ReactElement
|
|
} from "react"
|
|
|
|
const Field: FC<FieldProps> = ({children, type = 'text', className = '', classNameForm = '', ...props}) => {
|
|
|
|
return <div className={`form-control ${classNameForm}`}>
|
|
{children && <label className="block text-gray-900 dark:text-gray-200"
|
|
htmlFor={props.id ?? undefined}>
|
|
{children}
|
|
</label>}
|
|
<input className={`${className} mt-2 w-full rounded dark:bg-gray-700`}
|
|
type={type}
|
|
{...props}/>
|
|
<div className={`error-message`} />
|
|
</div>
|
|
}
|
|
|
|
export default Field
|
|
|
|
interface FieldProps {
|
|
children?: ReactElement|string,
|
|
type?: HTMLInputTypeAttribute,
|
|
name: string,
|
|
id?: string,
|
|
value: string|number|undefined,
|
|
placeholder?: string,
|
|
autoFocus?: boolean,
|
|
className?: string,
|
|
classNameForm?: string,
|
|
step?: string,
|
|
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void,
|
|
}
|
|
|
|
export const TextArea: FC<TextAreaProps> = ({children, name, value, className = '', classNameForm = '', ...props}) => {
|
|
|
|
return <div className={`form-control ${classNameForm}`}>
|
|
{children && <label className="block text-gray-900 dark:text-gray-200"
|
|
htmlFor={props.id ?? undefined}>
|
|
{children}
|
|
</label>}
|
|
<textarea name={name} className={`${className} mt-2 w-full rounded dark:bg-gray-700`} {...props}>
|
|
{value}
|
|
</textarea>
|
|
<div className={`error-message`}/>
|
|
</div>
|
|
}
|
|
|
|
interface TextAreaProps {
|
|
children?: ReactElement|string,
|
|
id?: string,
|
|
name: string,
|
|
value: string|undefined,
|
|
className?: string,
|
|
classNameForm?: string,
|
|
onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
|
|
}
|