login

src/components/Input.tsx

@@ -1,5 +1,6 @@
-import { FC, InputHTMLAttributes } from 'react'
+import { FC, InputHTMLAttributes, useState } from 'react'
 import { clx } from '../helpers/utils';
+import EyeIcon from '../assets/images/eye.svg'
 
 type Variant = "floating_outlined" | "primary" | "search";
 
@@ -16,19 +17,29 @@ type Props = {
 
 const Input: FC<Props> = (props: Props) => {
 
+    const [showPassword, setShowPassword] = useState<boolean>(false)
+
     const inputClass = clx(
         'w-full h-10 text-black block px-4 text-xs rounded-xl mt-1 border border-border',
         props.readOnly && 'bg-gray-100',
         props.className
     );
 
+
     return (
         <div className='w-full'>
             <label className='text-sm'>
                 {props.label}
             </label>
 
-            <input {...props} className={inputClass} />
+            <div className='w-full relative'>
+                <input {...props} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+
+                {
+                    props.type === 'password' &&
+                    <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
+                }
+            </div>
         </div>
     )
 }