From 293df20781b8f0ae6fcbabb1a33b3d1752e494c8 Mon Sep 17 00:00:00 2001
From: l3wdfut4pwr <l3wdfut4pwr@gmail.com>
Date: Tue, 17 Mar 2026 21:51:22 +0200
Subject: add password toggle button

---
 src/components/ui/input.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

(limited to 'src/components/ui/input.tsx')

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>
+    );
 }
-- 
cgit v1.3-3-g829e