65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------------ React --------------------------------------------------------
|
|
import { forwardRef, MouseEvent, useState } from 'react';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import EyeSlashIcon from '@/assets/EyeSlashIcon';
|
|
import EyeIcon from '@/assets/EyeIcon';
|
|
import './styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Input = ({
|
|
name = '',
|
|
type = '',
|
|
placeholder = '',
|
|
defaultValue = '',
|
|
required = false,
|
|
autoComplete = 'off',
|
|
}) => {
|
|
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
|
|
|
|
const togglePasswordVisibility = (ev: MouseEvent) => {
|
|
ev.stopPropagation();
|
|
|
|
setIsPasswordVisible((prev) => !prev);
|
|
};
|
|
|
|
return (
|
|
<div className='inputContainer'>
|
|
<input
|
|
type={
|
|
type == 'password'
|
|
? isPasswordVisible
|
|
? 'text'
|
|
: 'password'
|
|
: type
|
|
}
|
|
name={name}
|
|
id={name}
|
|
placeholder={placeholder}
|
|
defaultValue={defaultValue}
|
|
autoComplete={autoComplete}
|
|
required={required}
|
|
className='input'
|
|
/>
|
|
{type == 'password' && (
|
|
<button
|
|
type='button'
|
|
className='passwordToggleButton'
|
|
onClick={togglePasswordVisibility}
|
|
>
|
|
{isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Input;
|