created sign up page ui

components/custom-button.tsx

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@/types/type";
+import type { ButtonProps } from "@/types/type";
 import React from "react";
 import { Text, TouchableOpacity } from "react-native";
 

components/input-field.tsx

@@ -0,0 +1,53 @@
+import {
+  Image,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+
+import type { InputFieldProps } from "@/types/type";
+
+export const InputField = ({
+  label,
+  labelStyles,
+  icon,
+  secureTextEntry = false,
+  containerStyles,
+  inputStyles,
+  iconStyles,
+  className,
+  ...props
+}: InputFieldProps) => (
+  <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View className="my-2 w-full">
+        <Text className={`text-lg font-JakartaSemiBold mb-3 ${labelStyles}`}>
+          {label}
+        </Text>
+
+        <View
+          className={`flex flex-row justify-start items-center relative bg-neutral-100 rounded-full border border-neutral-100 focus:border-primary-500 ${containerStyles}`}
+        >
+          {icon && (
+            <Image
+              source={icon}
+              alt={`${label} icon`}
+              className={`h-6 w-6 ml-4 mt-1 ${iconStyles}`}
+            />
+          )}
+
+          <TextInput
+            className={`rounded-full p-4 font-JakartaSemiBold text-[15px] flex-1 text-left ${inputStyles}`}
+            secureTextEntry={secureTextEntry}
+            selectionColor="#0286ff"
+            {...props}
+          />
+        </View>
+      </View>
+    </TouchableWithoutFeedback>
+  </KeyboardAvoidingView>
+);