54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
'use client';
|
|
import { AiTwotoneEyeInvisible } from 'react-icons/ai';
|
|
import { AiTwotoneEye } from 'react-icons/ai';
|
|
import { useState } from 'react';
|
|
|
|
import { IAuthInput } from '@/typings/auth-input.type';
|
|
|
|
const AuthInput = ({ id, placeholder, type, required, label }: IAuthInput) => {
|
|
const [isVisible, setIsVisible] = useState<boolean>(false);
|
|
return (
|
|
<div className="auth-input relative w-full">
|
|
{label ? <label htmlFor={id}>{label}</label> : null}
|
|
<input
|
|
type={type === 'password' ? (isVisible ? 'text' : type) : type}
|
|
required={required}
|
|
name={id}
|
|
id={id}
|
|
placeholder={placeholder}
|
|
className="text-[#474747] font-mw_sans font-normal text-base bg-[#F5F5F5] rounded-[5px] p-4 w-full outline-none"
|
|
/>
|
|
{type === 'password' ? (
|
|
<>
|
|
<AiTwotoneEye
|
|
color="#474747"
|
|
width={20}
|
|
height={20}
|
|
className="w-5 h-5 absolute right-5 top-[50%] -translate-y-[50%] transition-all opacity-100 cursor-pointer"
|
|
style={
|
|
isVisible
|
|
? { opacity: 1, pointerEvents: 'all' }
|
|
: { opacity: 0, pointerEvents: 'none' }
|
|
}
|
|
onClick={() => setIsVisible(!isVisible)}
|
|
/>
|
|
<AiTwotoneEyeInvisible
|
|
color="#474747"
|
|
width={20}
|
|
height={20}
|
|
className="w-5 h-5 absolute right-5 top-[50%] -translate-y-[50%] transition-all opacity-100 cursor-pointer"
|
|
style={
|
|
!isVisible
|
|
? { opacity: 1, pointerEvents: 'all' }
|
|
: { opacity: 0, pointerEvents: 'none' }
|
|
}
|
|
onClick={() => setIsVisible(!isVisible)}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AuthInput;
|