profile screen ui implemented

app/(root)/(tabs)/profile.tsx

@@ -1,10 +1,60 @@
-import { Text } from "react-native";
+import { useUser } from "@clerk/clerk-expo";
+import { Image, ScrollView, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
+import { InputField } from "@/components/input-field";
+
 const Profile = () => {
+  const { user } = useUser();
+
   return (
-    <SafeAreaView>
+    <SafeAreaView className="flex-1">
-      <Text>Profile</Text>
+      <ScrollView
+        className="px-5"
+        contentContainerStyle={{ paddingBottom: 120 }}
+      >
+        <Text className="text-2xl font-JakartaBold my-5">My profile</Text>
+
+        <View className="flex items-center justify-center my-5">
+          <Image
+            source={{
+              uri: user?.externalAccounts[0]?.imageUrl ?? user?.imageUrl,
+            }}
+            style={{ width: 110, height: 110, borderRadius: 110 / 2 }}
+            className=" rounded-full h-[110px] w-[110px] border-[3px] border-white shadow-sm shadow-neutral-300"
+          />
+        </View>
+
+        <View className="flex flex-col items-start justify-center bg-white rounded-lg shadow-sm shadow-neutral-300 px-5 py-3">
+          <View className="flex flex-col items-start justify-start w-full">
+            <InputField
+              label="First name"
+              placeholder={user?.firstName || "Not Found"}
+              containerStyles="w-full mb-4"
+              inputStyles="p-3.5"
+              editable={false}
+            />
+
+            <InputField
+              label="Last name"
+              placeholder={user?.lastName || "Not Found"}
+              containerStyles="w-full mb-4"
+              inputStyles="p-3.5"
+              editable={false}
+            />
+
+            <InputField
+              label="Email"
+              placeholder={
+                user?.primaryEmailAddress?.emailAddress || "Not Found"
+              }
+              containerStyles="w-full mb-4"
+              inputStyles="p-3.5"
+              editable={false}
+            />
+          </View>
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 };