63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import styles from "./input.module.css";
|
|
import { useState, ChangeEvent, InputHTMLAttributes } from "react";
|
|
|
|
interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
placeholder?: string;
|
|
value?: string;
|
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
borderStyle?: "square" | "rounded";
|
|
password?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const TextInput = ({
|
|
placeholder,
|
|
onChange,
|
|
value,
|
|
borderStyle = "square",
|
|
password,
|
|
className = "",
|
|
...props
|
|
}: TextInputProps) => {
|
|
const [showPassword, setShowPassword] = useState<boolean>(false);
|
|
|
|
let inputBorderStyle = styles.square;
|
|
if (borderStyle === "rounded") inputBorderStyle = styles.rounded;
|
|
|
|
const toggleShowPassword = () => {
|
|
setShowPassword((prev) => !prev);
|
|
};
|
|
|
|
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;
|