init

src/components/input/PasswordInput.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+import Button from '@/components/Button';
+
+interface PasswordInputProps
+  extends Omit<TextInputProps, 'type' | 'startAdornment' | 'endAdornment'> {}
+
+const PasswordInput = (props: PasswordInputProps) => {
+  const [type, setType] = useState('password');
+
+  const showPasswordHandler = () => {
+    setType((prevType) => {
+      if (prevType === 'password') return 'text';
+
+      return 'password';
+    });
+  };
+
+  return (
+    <TextInput
+      {...props}
+      type={type}
+      endAdornment={
+        <Button
+          tabIndex={-1}
+          type='button'
+          variant='ghost'
+          onClick={showPasswordHandler}
+          className='btn btn-ghost w-fit h-fit p-2 rounded-full'
+          disabled={props.disabled}
+        >
+          <Icon
+            icon={type === 'password' ? 'mdi:eye' : 'mdi:eye-off'}
+            width={16}
+            height={16}
+          />
+        </Button>
+      }
+    />
+  );
+};
+
+export default PasswordInput;