initial commit

components/FormField.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+const FormField = ({
+  title,
+  placeholder,
+  value,
+  handleChangeText,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const isPasswordField = title === "Password" || title === "Confirm Password";
+
+  return (
+    <div className="w-full">
+      <label
+        className="block mb-2"
+        style={{
+          color: "#666666",
+          fontFamily: "Montserrat, sans-serif",
+          fontWeight: "500",
+          fontSize: 18,
+          marginBottom: 8,
+          letterSpacing: "-0.5px",
+        }}
+      >
+        {title}
+      </label>
+
+      <div
+        className="h-16 px-4 bg-blue-200 rounded-3xl flex items-center justify-between"
+        style={{
+          height: 64,
+          paddingLeft: 16,
+          paddingRight: 16,
+          backgroundColor: "#D2DFF0",
+          borderRadius: 20,
+        }}
+      >
+        <input
+          type={isPasswordField && !showPassword ? "password" : "text"}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => handleChangeText(e.target.value)}
+          className="flex-1 bg-transparent outline-none border-none text-blue-950"
+          style={{
+            color: "#0D47A1",
+            fontSize: 16,
+            fontFamily: "inherit",
+            backgroundColor: "transparent",
+            border: "none",
+            outline: "none",
+          }}
+          {...props}
+        />
+
+        {isPasswordField && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
+            style={{
+              fontFamily: "Montserrat, sans-serif",
+              fontWeight: "500",
+              fontSize: 16,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+            }}
+          >
+            {showPassword ? "Hide" : "Show"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FormField;