45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import styles from '../styles/input.module.scss';
|
|
import { parseClassName } from '../utils/utils.js';
|
|
import {AiFillEye, AiFillEyeInvisible} from 'react-icons/ai'
|
|
import { useState } from 'react';
|
|
export default function Input(props) {
|
|
const id = Math.random()
|
|
const [type, setType] = useState(props.type ||'text')
|
|
return (
|
|
<span
|
|
className={parseClassName([
|
|
styles["input-container"],
|
|
props.error ? styles["error"] : undefined,
|
|
])}
|
|
>
|
|
<input
|
|
{...props}
|
|
id={`input_${id}`}
|
|
className={styles.input}
|
|
required
|
|
placeholder=""
|
|
type={type}
|
|
/>
|
|
{props.type == "password" &&
|
|
(type != "password" ? (
|
|
<AiFillEye
|
|
onClick={() => {
|
|
setType("password");
|
|
}}
|
|
className={styles["password-toggler"]}
|
|
/>
|
|
) : (
|
|
<AiFillEyeInvisible
|
|
onClick={() => {
|
|
setType("text");
|
|
}}
|
|
className={styles["password-toggler"]}
|
|
/>
|
|
))}
|
|
<label className={styles.label} htmlFor={`input_${id}`}>
|
|
{props.placeholder}
|
|
</label>
|
|
<span className={styles.bar}></span>
|
|
</span>
|
|
);
|
|
} |