34 lines
975 B
TypeScript
34 lines
975 B
TypeScript
"use client";
|
||
|
||
import { Eye, EyeOff } from "lucide-react";
|
||
import { useState } from "react";
|
||
import {
|
||
InputGroup,
|
||
InputGroupAddon,
|
||
InputGroupButton,
|
||
InputGroupInput,
|
||
} from "@/components/ui/input-group";
|
||
import { tr } from "@/i18n/tr";
|
||
|
||
/** Göster/gizle düğmeli şifre alanı. */
|
||
export function PasswordInput(props: Omit<React.ComponentProps<typeof InputGroupInput>, "type">) {
|
||
const [visible, setVisible] = useState(false);
|
||
const label = visible ? tr.common.hidePassword : tr.common.showPassword;
|
||
return (
|
||
<InputGroup>
|
||
<InputGroupInput type={visible ? "text" : "password"} {...props} />
|
||
<InputGroupAddon align="inline-end">
|
||
<InputGroupButton
|
||
size="icon-xs"
|
||
aria-label={label}
|
||
title={label}
|
||
aria-pressed={visible}
|
||
onClick={() => setVisible((v) => !v)}
|
||
>
|
||
{visible ? <EyeOff /> : <Eye />}
|
||
</InputGroupButton>
|
||
</InputGroupAddon>
|
||
</InputGroup>
|
||
);
|
||
}
|