Convert Input and Button UI component to TypeScript

src/components/ui/input/input.jsx

@@ -1,38 +0,0 @@
-import styles from "./input.module.css";
-import { useState } from "react";
-
-const TextInput = ({ placeholder, onChange, value, borderStyle, password, className, ...props }) => {
-
-    const [showPassword, setShowPassword] = useState(false);
-
-    let inputBorderStyle = styles.square;
-    if (borderStyle === "square") inputBorderStyle = styles.square;
-    if(borderStyle === "rounded") inputBorderStyle = styles.rounded;
-
-    const toggleShowPassword = () => {
-        setShowPassword(!showPassword);
-    };
-
-    if(password) return (
-        <div className={styles.passwordContainer}>
-            <TextInput
-                type={showPassword ? "text" : "password"}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                className={styles.passwordInput}
-            />
-            <button
-                type="button"
-                onClick={toggleShowPassword}
-                className={styles.passwordBtn}
-            >
-                {showPassword ? '👁️' : '🔒'}
-            </button>
-        </div>
-    );
-
-    return <input className={`${styles.input} ${inputBorderStyle} ${className}`} onChange={onChange} placeholder={placeholder} value={value} {...props} />
-};
-
-export default TextInput;

src/components/ui/input/input.tsx

@@ -0,0 +1,62 @@
+import styles from "./input.module.css";
+import { useState, ChangeEvent, InputHTMLAttributes } from "react";
+
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    borderStyle?: "square" | "rounded";
+    password?: boolean;
+    className?: string;
+}
+
+const TextInput = ({
+                       placeholder,
+                       onChange,
+                       value,
+                       borderStyle = "square",
+                       password,
+                       className = "",
+                       ...props
+                   }: TextInputProps) => {
+    const [showPassword, setShowPassword] = useState<boolean>(false);
+
+    let inputBorderStyle = styles.square;
+    if (borderStyle === "rounded") inputBorderStyle = styles.rounded;
+
+    const toggleShowPassword = () => {
+        setShowPassword((prev) => !prev);
+    };
+
+    if (password)
+        return (
+            <div className={styles.passwordContainer}>
+                <TextInput
+                    type={showPassword ? "text" : "password"}
+                    value={value}
+                    placeholder={placeholder}
+                    onChange={onChange}
+                    className={styles.passwordInput}
+                />
+                <button
+                    type="button"
+                    onClick={toggleShowPassword}
+                    className={styles.passwordBtn}
+                >
+                    {showPassword ? "👁️" : "🔒"}
+                </button>
+            </div>
+        );
+
+    return (
+        <input
+            className={`${styles.input} ${inputBorderStyle} ${className}`}
+            onChange={onChange}
+            placeholder={placeholder}
+            value={value}
+            {...props}
+        />
+    );
+};
+
+export default TextInput;