26 lines
912 B
TypeScript
26 lines
912 B
TypeScript
import { useState, forwardRef } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Eye, EyeOff } from "lucide-react";
|
|
|
|
export const PasswordInput = forwardRef<HTMLInputElement, React.ComponentProps<typeof Input>>(
|
|
function PasswordInput(props, ref) {
|
|
const [visible, setVisible] = useState(false);
|
|
return (
|
|
<div className="relative">
|
|
<Input ref={ref} {...props} type={visible ? "text" : "password"} className="pr-10" />
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-muted-foreground hover:text-foreground absolute top-0 right-0 h-full w-10"
|
|
onClick={() => setVisible((v) => !v)}
|
|
tabIndex={-1}
|
|
>
|
|
{visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
);
|