55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface InputProps {
|
|
valid?: boolean;
|
|
placeholder?: string;
|
|
validationMessage?: string;
|
|
icon?: JSX.Element;
|
|
type: string;
|
|
name: string;
|
|
value?: string;
|
|
}
|
|
|
|
export const Input = ({
|
|
valid,
|
|
placeholder,
|
|
validationMessage,
|
|
icon,
|
|
type,
|
|
name,
|
|
value,
|
|
}: InputProps): JSX.Element => {
|
|
return (
|
|
<div className="space-y-1">
|
|
<label
|
|
htmlFor={name}
|
|
className="block text-sm font-medium dark:text-white"
|
|
>
|
|
{name}
|
|
</label>
|
|
<div className="relative">
|
|
{icon && (
|
|
<div className="flex absolute inset-y-0 left-0 px-3 items-center pointer-events-none">
|
|
{React.cloneElement(icon, {
|
|
className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
|
|
})}
|
|
</div>
|
|
)}
|
|
<input
|
|
type={type}
|
|
name={name}
|
|
id={name}
|
|
value={value}
|
|
className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
|
|
icon ? 'pl-9' : 'pl-2'
|
|
}`}
|
|
placeholder={placeholder}
|
|
/>
|
|
</div>
|
|
{!valid && (
|
|
<div className="text-sm text-gray-600">{validationMessage}</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|