39 lines
1.2 KiB
React
39 lines
1.2 KiB
React
import styles from "./input.module.css";
|
|
import { useState } from "react";
|
|
|
|
const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
let inputBorderStyle = styles.square;
|
|
if (borderStyle === "square") inputBorderStyle = styles.square;
|
|
if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
|
|
|
|
const toggleShowPassword = () => {
|
|
setShowPassword(!showPassword);
|
|
};
|
|
|
|
if(password) return (
|
|
<div className={styles.passwordContainer}>
|
|
<TextInput
|
|
type={showPassword ? "text" : "password"}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={onChange}
|
|
className={styles.passwordInput}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={toggleShowPassword}
|
|
className={styles.passwordBtn}
|
|
>
|
|
{showPassword ? '👁️' : '🔒'}
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
|
|
};
|
|
|
|
export default TextInput;
|