28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import React, { InputHTMLAttributes } from 'react';
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
icon?: React.ReactNode;
|
|
error?: string;
|
|
}
|
|
|
|
export default function Input({ label, icon, error, className = '', ...props }: InputProps) {
|
|
return (
|
|
<div className={`flex flex-col gap-1.5 ${className}`}>
|
|
{label && <label className="text-sm font-semibold text-gray-700 select-none">{label}</label>}
|
|
<div className="relative">
|
|
{icon && (
|
|
<div className="absolute left-3 top-0 bottom-0 flex items-center justify-center text-gray-500 pointer-events-none">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<input
|
|
className={`w-full h-[48px] rounded-lg border ${error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary'} bg-white text-base text-gray-900 outline-none transition-shadow placeholder-gray-400 ${icon ? 'pl-10' : 'pl-4'} pr-4 touch-manipulation`}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
{error && <span className="text-xs text-red-500 font-medium select-none">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|