64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import eye_off from "./icons/eye-off.svg";
|
|
import eye_on from "./icons/eye-on.svg";
|
|
import { useFormContext } from "react-hook-form";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
name: string;
|
|
label?: string;
|
|
required?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const ChangePasswordInput: React.FC<Props> = ({
|
|
name,
|
|
label,
|
|
required,
|
|
className,
|
|
...props
|
|
}) => {
|
|
const {
|
|
register,
|
|
formState: { errors },
|
|
} = useFormContext();
|
|
console.log(name);
|
|
|
|
const errorText = errors[name]?.message as string;
|
|
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
return (
|
|
<div className={cn("flex flex-col gap-2", className)}>
|
|
{label && (
|
|
<label className="font-bold leading-5 text-gray-700">
|
|
{label}
|
|
{required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
)}
|
|
<div
|
|
className={`py-[10px] px-[14px] flex items-center justify-between border border-gray-300 rounded-md shadow-sm bg-gray-200${
|
|
errorText ? "-with-error" : ""
|
|
}`}
|
|
>
|
|
<input
|
|
{...register(name)}
|
|
{...props}
|
|
type={isOpen ? "text" : "password"}
|
|
className="w-full text-[14px] placeholder:leading-6 bg-gray-200"
|
|
/>
|
|
<button onClick={() => setIsOpen((prev) => !prev)} type="button">
|
|
<Image src={isOpen ? eye_on : eye_off} alt="Eye Icon" />
|
|
</button>
|
|
</div>
|
|
{errorText && (
|
|
<p className="text-[14px] leading-5 text-red-500">{errorText}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChangePasswordInput;
|