created sign up page ui

app/(auth)/sign-up.tsx

@@ -1,11 +1,97 @@
-import { Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { useState } from "react";
+import { Image, ScrollView, Text, View } from "react-native";
+
+import { InputField } from "@/components/input-field";
+import { icons, images } from "@/constants";
+import { CustomButton } from "@/components/custom-button";
+import { Link } from "expo-router";
 
 const SignUp = () => {
+  const [form, setForm] = useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const onSignUpPress = async () => {};
+
   return (
-    <SafeAreaView>
-      <Text>SignUp</Text>
-    </SafeAreaView>
+    <ScrollView className="flex-1 bg-white">
+      <View className="flex-1 bg-white">
+        <View className="relative w-full h-[250px]">
+          <Image
+            source={images.signUpCar}
+            alt="Car"
+            className="z-0 w-full h-[250px]"
+            resizeMode="contain"
+          />
+
+          <Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
+            Create Your Account
+          </Text>
+        </View>
+
+        <View className="p-5">
+          <InputField
+            label="Name"
+            placeholder="Enter your name"
+            icon={icons.person}
+            value={form.name}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                name: value,
+              }))
+            }
+          />
+
+          <InputField
+            label="Email"
+            placeholder="Enter your email"
+            icon={icons.email}
+            value={form.email}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                email: value,
+              }))
+            }
+          />
+
+          <InputField
+            label="Password"
+            placeholder="Enter your password"
+            icon={icons.lock}
+            secureTextEntry
+            value={form.password}
+            onChangeText={(value) =>
+              setForm((prevForm) => ({
+                ...prevForm,
+                password: value,
+              }))
+            }
+          />
+
+          <CustomButton
+            title="Sign Up"
+            onPress={onSignUpPress}
+            className="mt-6"
+          />
+
+          {/* OAuth */}
+
+          <Link
+            href="/sign-in"
+            className="text-lg text-center text-general-200 mt-10"
+          >
+            <Text>Already have an account? </Text>
+            <Text className="text-primary-500">Login</Text>
+          </Link>
+        </View>
+
+        {/* Verification Modal */}
+      </View>
+    </ScrollView>
   );
 };
 

app/(auth)/welcome.tsx

@@ -1,11 +1,12 @@
-import { CustomButton } from "@/components/custom-button";
-import { onboarding } from "@/constants";
 import { router } from "expo-router";
 import { useRef, useState } from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Swiper from "react-native-swiper";
 
+import { CustomButton } from "@/components/custom-button";
+import { onboarding } from "@/constants";
+
 const Welcome = () => {
   const swiperRef = useRef<Swiper>(null);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -32,6 +33,7 @@ const Welcome = () => {
           <View key={item.id} className="flex items-center justify-center p-5">
             <Image
               source={item.image}
+              alt={`Onboarding Item ${item.id}`}
               className="w-full h-[300px]"
               resizeMode="contain"
             />

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>
+);

types/type.d.ts

@@ -82,10 +82,10 @@ declare interface InputFieldProps extends TextInputProps {
   label: string;
   icon?: any;
   secureTextEntry?: boolean;
-  labelStyle?: string;
-  containerStyle?: string;
-  inputStyle?: string;
-  iconStyle?: string;
+  labelStyles?: string;
+  containerStyles?: string;
+  inputStyles?: string;
+  iconStyles?: string;
   className?: string;
 }