created sign up page ui

2024-08-29 15:37:44 +00:00
parent 77030fd4c2
commit de8ca40dcf
5 changed files with 153 additions and 12 deletions
@@ -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>
  );
 };