59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import React from "react";
|
|
import { View, Text, Pressable, Image } from "react-native";
|
|
import { Link } from "expo-router";
|
|
import { BellIcon, LucidePersonStanding } from "lucide-react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { ROUTES } from "~/lib/routes";
|
|
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
|
|
import { Icons } from "~/assets/icons";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
function TopBar() {
|
|
const { t } = useTranslation();
|
|
const { profile, profileLoading } = useAuthWithProfile();
|
|
const insets = useSafeAreaInsets();
|
|
const fullName = profile?.fullName;
|
|
const firstName = fullName?.split(" ")[0];
|
|
const avatarSource = profile?.photoUrl
|
|
? { uri: profile.photoUrl }
|
|
: Icons.avatar;
|
|
|
|
return (
|
|
<View className="flex flex-row items-center justify-between px-5 pt-4 pb-4 w-full">
|
|
<View className="flex flex-row items-center">
|
|
<Text className="font-dmsans text-xl font-bold">
|
|
{t("components.topbar.greeting")}
|
|
</Text>
|
|
<Text className="font-dmsans text-xl ml-1 font-bold text-primary">
|
|
{profileLoading
|
|
? "..."
|
|
: firstName && firstName.length > 8
|
|
? firstName.substring(0, 8)
|
|
: firstName}
|
|
</Text>
|
|
</View>
|
|
<View className="flex flex-row items-center gap-2">
|
|
<Link href={ROUTES.NOTIFICATION} asChild>
|
|
<Pressable className="border border-dashed border-secondary rounded-full p-2">
|
|
<BellIcon color="#FFB668" size={24} />
|
|
</Pressable>
|
|
</Link>
|
|
<Link href={ROUTES.PROFILE} asChild>
|
|
<Pressable className="rounded-full overflow-hidden ml-3">
|
|
<Image
|
|
source={avatarSource}
|
|
style={[
|
|
{ width: 38, height: 38, borderRadius: 19 },
|
|
!profile?.photoUrl ? { tintColor: "#FFB668" } : null,
|
|
]}
|
|
resizeMode="cover"
|
|
/>
|
|
</Pressable>
|
|
</Link>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default TopBar;
|