add password toggle button

1 files changed, 24 insertions, 6 deletions

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 0424772..7dd5b62 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,9 +1,27 @@
+'use client';
+
 import { cn } from '@/lib/utils';
-import React from 'react';
+import { useState } from 'react';
+import ShowIcon from '@icons/show-icon.svg';
+import HideIcon from '@icons/hide-icon.svg';
 
-export function Input({
-    className,
-    ...props
-}: React.InputHTMLAttributes<HTMLInputElement>) {
-    return <input className={cn('outline-none', className)} {...props} />;
+export function Input({ className, isPassword, ...props }: any) {
+    const [show, setShow] = useState(false);
+    return (
+        <div className="relative w-full">
+            <input
+                {...props}
+                type={isPassword ? (show ? 'text' : 'password') : props.type}
+                className={cn('w-full outline-none', className)}
+            />
+            {isPassword && (
+                <span
+                    onClick={() => setShow(!show)}
+                    className="absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer"
+                >
+                    {show ? <ShowIcon /> : <HideIcon />}
+                </span>
+            )}
+        </div>
+    );
 }