45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import type { LucideIcon } from 'lucide-react';
|
|
|
|
interface Props {
|
|
label: string;
|
|
name: string;
|
|
type: string;
|
|
icon: LucideIcon;
|
|
placeholder: string;
|
|
showEye?: boolean;
|
|
toggleEye?: () => void;
|
|
eyeIcon?: LucideIcon;
|
|
// --- TAMBAHKAN DUA INI ---
|
|
value: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export default function LoginInput({
|
|
label, name, type, icon: Icon, placeholder, showEye, toggleEye, eyeIcon: EyeIcon,
|
|
value, onChange // <--- Terima props di sini
|
|
}: Props) {
|
|
return (
|
|
<div className="mb-4">
|
|
<label className="block text-gray-400 text-sm mb-1">{label}:</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500 group-focus-within:text-[#4A90E2]">
|
|
<Icon size={20} />
|
|
</div>
|
|
<input
|
|
name={name}
|
|
type={type}
|
|
placeholder={placeholder}
|
|
// --- PASANG DI SINI ---
|
|
value={value}
|
|
onChange={onChange}
|
|
className="w-full bg-[#3D444D] border border-gray-600 rounded-lg pl-11 pr-10 py-3 text-white focus:outline-none focus:border-[#4A90E2] transition-all placeholder:text-gray-500"
|
|
/>
|
|
{showEye && toggleEye && EyeIcon && (
|
|
<button type="button" onClick={toggleEye} className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-white">
|
|
<EyeIcon size={20} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |