31 lines
961 B
TypeScript
31 lines
961 B
TypeScript
import React, { InputHTMLAttributes, ReactNode } from 'react';
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
error?: boolean;
|
|
errorMessage?: string | undefined;
|
|
}
|
|
|
|
export default function Input({
|
|
error = false,
|
|
errorMessage,
|
|
className = '',
|
|
...props
|
|
}: InputProps) {
|
|
const baseStyles = 'block w-full rounded-md border-0 px-4 py-3 bg-iron-gray text-white shadow-sm ring-1 ring-inset placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm sm:leading-6';
|
|
const errorStyles = error ? 'ring-warning-amber' : 'ring-charcoal-outline';
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<input
|
|
className={`${baseStyles} ${errorStyles} ${className}`}
|
|
aria-invalid={error}
|
|
{...props}
|
|
/>
|
|
{error && errorMessage && (
|
|
<p className="mt-2 text-sm text-warning-amber">
|
|
{errorMessage}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
} |