forked from Transparency/kgroad-frontend2
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import "./AuthInput.scss";
|
|
import eye_off from "./icons/eye-off.svg";
|
|
import eye_on from "./icons/eye-on.svg";
|
|
import alert from "./icons/alert-circle.svg";
|
|
import { useState } from "react";
|
|
|
|
interface IAuthInputProps
|
|
extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
isPassword?: boolean;
|
|
label: string;
|
|
error: string;
|
|
}
|
|
|
|
const AuthInput: React.FC<IAuthInputProps> = ({
|
|
isPassword,
|
|
label,
|
|
error,
|
|
placeholder,
|
|
name,
|
|
type,
|
|
}: IAuthInputProps) => {
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
return (
|
|
<div className="auth-input">
|
|
<label>{label}</label>
|
|
<div
|
|
className={`auth-input__field${error ? "-with-error" : ""}`}
|
|
>
|
|
<input
|
|
name={name}
|
|
placeholder={placeholder}
|
|
type={!isPassword ? type : isOpen ? type : "password"}
|
|
/>
|
|
{isPassword && (
|
|
<button
|
|
onClick={() => setIsOpen((prev) => !prev)}
|
|
type="button"
|
|
>
|
|
<Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{error ? (
|
|
<p>
|
|
{error} <Image src={alert} alt="Alert Icon" />
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AuthInput;
|