Password

1"use client";
2
3import * as React from "react";
4
5import { Button } from "@/components/ui/button";
6import {
7  InputGroup,
8  InputGroupAddon,
9  InputGroupInput,
10} from "@/components/ui/input-group";
11import { Eye, EyeClosed } from "lucide-react";
12
13function Password({ className, ...props }: React.ComponentProps<"input">) {
14  const [visible, setVisible] = React.useState<boolean>(false);
15
16  return (
17    <InputGroup>
18      <InputGroupInput
19        type={visible ? "text" : "password"}
20        {...props}
21        className={className}
22      />
23      <InputGroupAddon align={"inline-end"}>
24        <Button
25          variant={"link"}
26          type="button"
27          onClick={() => setVisible(!visible)}
28        >
29          {visible ? <Eye /> : <EyeClosed />}
30        </Button>
31      </InputGroupAddon>
32    </InputGroup>
33  );
34}
35
36export { Password };