File size: 1,381 Bytes
f68b7db 2b62b0c f68b7db | 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 50 51 52 53 | import { useState } from "react";
import { Input } from "@pram/ui/components/input";
import { Button } from "@pram/ui/components/button";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
type PasswordInputProps = {
id: string;
name?: string;
value: string;
onChange: (value: string) => void;
onBlur?: () => void;
placeholder?: string;
autoComplete?: string;
};
export function PasswordInput({
id,
name,
value,
onChange,
onBlur,
placeholder,
autoComplete,
}: PasswordInputProps) {
const [visible, setVisible] = useState(false);
return (
<div className="relative">
<Input
id={id}
name={name}
type={visible ? "text" : "password"}
value={value}
onBlur={onBlur}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
autoComplete={autoComplete}
className="pr-11"
/>
<Button
type="button"
variant="ghost"
size="icon"
className="absolute right-0 top-0 h-full w-11 rounded-[var(--radius-lg)] text-muted-foreground hover:text-foreground"
aria-label={visible ? "Sembunyikan password" : "Tampilkan password"}
onClick={() => setVisible((prev) => !prev)}
>
<MaterialIcon name={visible ? "visibility_off" : "visibility"} className="text-xl" />
</Button>
</div>
);
}
|