sign up

app/(auth)/sign-up.tsx

@@ -1,24 +1,67 @@
-
+import { Link, router } from "expo-router";
+import { useState } from "react";
 import { Alert, Image, ScrollView, Text, View } from "react-native";
 
-
 import CustomButton from "@/components/CustomButton";
-
-import { icons, images } from "@/constants";
 import InputField from "@/components/InputField";
+import { icons, images } from "@/constants";
+import OAuth from "@/components/OAuth";
+
 const SignUp = () => {
+    const [form, setForm] = useState({
+        name: "",
+        email: '',
+        password: '',
+    })
+    const onSignUpPress = async () => {
+
+    }
     return (
         <ScrollView className="flex-1 bg-white">
             <View className="flex-1 bg-white">
                 <View className="relative w-full h-[250px]">
                     <Image source={images.signUpCar} className="z-0 w-full h-[250px]" />
-
                     <Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
                         Create Your Account
                     </Text>
                 </View>
                 <View className="p-5">
-<InputField/>
+                    <InputField
+                        label="Name"
+                        placeholder="Enter name"
+                        icon={icons.person}
+                        value={form.name}
+                        onChangeText={(value) => setForm({ ...form, name: value })}
+                    />
+                    <InputField
+                        label="Email"
+                        placeholder="Enter email"
+                        icon={icons.email}
+                        textContentType="emailAddress"
+                        value={form.email}
+                        onChangeText={(value) => setForm({ ...form, email: value })}
+                    />
+                    <InputField
+                        label="Password"
+                        placeholder="Enter password"
+                        icon={icons.lock}
+                        secureTextEntry={true}
+                        textContentType="password"
+                        value={form.password}
+                        onChangeText={(value) => setForm({ ...form, password: value })}
+                    />
+                    <CustomButton title="Sign Up" onPress={onSignUpPress} className="mt-6" />
+
+                    <OAuth />
+
+                    <Link href="/sign-in" className="text-lg text-center-general-200 mt-10">
+                        <Text>
+                            Already have an account?
+                            <Text className="text-primary-500">
+                                Log In
+                            </Text>
+                        </Text>
+                    </Link>
                 </View>
             </View>
         </ScrollView>

components/InputField.tsx

@@ -1,10 +1,24 @@
-import { KeyboardAvoidingView } from "react-native";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { InputFieldProps } from "@/types/type";
+import { KeyboardAvoidingView, View, Text, Image, TextInput, Platform, Keyboard, TouchableWithoutFeedback} from "react-native";
 
-const InputField = () => (
-    <KeyboardAvoidingView>
-        <TouchableWithoutFeedback>
-
+
+const InputField = ({ label, labelStyle, icon, secureTextEntry = false,
+    containerStyle, inputStyle, iconStyle, className, ...props }:InputFieldProps) => (
+    <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"}>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+            <View className="my-2 w-full">
+                <Text className={`tetx-lg font-JakartaSemiBold mb-3 ${labelStyle}`}>
+                    {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 ${containerStyle}`}>
+                    {icon && (<Image source={icon} className={`w-6 h-6 ml-4 ${iconStyle}`} />)}
+                    <TextInput className={`rounded-full p-4 font-JakartaSemiBold text-[15px]
+                    flex-1 ${inputStyle} text-left`}
+                        secureTextEntry={secureTextEntry}
+                        {...props} />
+                </View>
+            </View>
         </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
 )

components/OAuth.tsx

@@ -0,0 +1,32 @@
+import { View, Text, Image } from "react-native"
+import CustomButton from "./CustomButton"
+import { icons } from "@/constants"
+
+const OAuth = () => {
+    const handleGoogleSignIn = async () => {
+
+    }
+    return(
+        <View>
+            <View className="flex flex-row justify-center items-center mt-4 gap-x-3">
+                <View className="flex-1 h-[1px] bg-general-100" />
+                <Text className="text-lg">
+                    Or
+                </Text>
+                <View className="flex-1 h-[1px] bg-general-100" />
+
+            </View>
+            <CustomButton
+                title="Log in with Google"
+                className="mt-5 w-full shadow-none"
+                IconLeft={() => (
+                    <Image source={icons.google} resizeMode="contain" className="w-5 h-5 mx-2" />
+                )}
+                bgVariant="outline"
+                textVariant="primary"
+                onPress={handleGoogleSignIn}
+            />
+        </View>
+    )
+}
+export default OAuth