Password

1import { EyeIcon, EyeOffIcon } from 'lucide-react'
2import { useState } from 'react'
3import {
4	InputGroup,
5	InputGroupAddon,
6	InputGroupButton,
7	InputGroupInput,
8} from '@/components/ui/input-group'
9 
10export function Password(props: React.ComponentProps<typeof InputGroupInput>) {
11	const [isVisible, setIsVisible] = useState<boolean>(false)
12 
13	const toggleVisibility = () => setIsVisible((prevState) => !prevState)
14 
15	return (
16		<InputGroup>
17			<InputGroupInput
18				placeholder="password"
19				type={isVisible ? 'text' : 'password'}
20				{...props}
21			/>
22			<InputGroupAddon align="inline-end">
23				<InputGroupButton onClick={toggleVisibility}>
24					{isVisible ? (
25						<EyeOffIcon size={16} aria-hidden="true" />
26					) : (
27						<EyeIcon size={16} aria-hidden="true" />
28					)}
29				</InputGroupButton>
30			</InputGroupAddon>
31		</InputGroup>
32	)
33}