64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
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 className="flex-1">
|
|
<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,
|
|
}}
|
|
alt="Your Avatar"
|
|
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 ?? "Your First name"}
|
|
containerStyles="w-full mb-4"
|
|
inputStyles="p-3.5"
|
|
editable={false}
|
|
/>
|
|
|
|
<InputField
|
|
label="Last name"
|
|
placeholder={user?.lastName ?? "Your Last name"}
|
|
containerStyles="w-full mb-4"
|
|
inputStyles="p-3.5"
|
|
editable={false}
|
|
/>
|
|
|
|
<InputField
|
|
label="Email"
|
|
placeholder={
|
|
user?.primaryEmailAddress?.emailAddress ?? "Your Email address"
|
|
}
|
|
containerStyles="w-full mb-4"
|
|
inputStyles="p-3.5"
|
|
editable={false}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|