File size: 1,250 Bytes
676fc08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
"use client";
import {
useState,
forwardRef,
type ForwardedRef,
type ComponentProps,
} from "react";
import { Eye, EyeOff } from "lucide-react";
import { Input as OriginalInput } from "@/components/ui/input";
import { cn } from "@/utils/style";
type Props = ComponentProps<"input">;
function PasswordInput(
{ className, type, ...props }: Props,
forwardedRef: ForwardedRef<HTMLInputElement>
) {
const [showPassword, setShowPassword] = useState<boolean>(false);
return (
<div className={cn("relative", className)}>
<OriginalInput
ref={forwardedRef}
{...props}
className="pr-9 w-full text-sm"
type={showPassword ? type : "password"}
/>
<div className="absolute top-0.5 right-1 w-8 h-8 text-gray-500 cursor-pointer flex justify-center items-center">
{showPassword ? (
<EyeOff
className="w-5 h-5 scale-90"
onClick={() => setShowPassword(false)}
/>
) : (
<Eye
className="w-5 h-5 scale-90"
onClick={() => setShowPassword(true)}
/>
)}
</div>
</div>
);
}
const Password = forwardRef(PasswordInput);
Password.displayName = "PasswordInput";
export { Password };
|