first

apps/web/modules/ui/components/password-input.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React from "react";
+import { Input } from "./input";
+
+export function PasswordInput({
+	value,
+	onChange,
+	className,
+	autoComplete,
+}: {
+	value: string;
+	onChange: (value: string) => void;
+	className?: string;
+	autoComplete?: string;
+}) {
+	const [showPassword, setShowPassword] = React.useState(false);
+
+	return (
+		<div className={`relative ${className}`}>
+			<Input
+				type={showPassword ? "text" : "password"}
+				className="pr-10"
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				autoComplete={autoComplete}
+			/>
+			<button
+				type="button"
+				onClick={() => setShowPassword(!showPassword)}
+				className="absolute inset-y-0 right-0 flex items-center pr-4 text-primary text-xl"
+			>
+				{showPassword ? (
+					<EyeOffIcon className="size-4" />
+				) : (
+					<EyeIcon className="size-4" />
+				)}
+			</button>
+		</div>
+	);
+}