84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { View, Image, Pressable, useColorScheme } from "react-native";
|
|
import { Text } from "@/components/ui/text";
|
|
import { ArrowLeft, Bell } from "@/lib/icons";
|
|
import { ShadowWrapper } from "@/components/ShadowWrapper";
|
|
import { useAuthStore } from "@/lib/auth-store";
|
|
import { router } from "expo-router";
|
|
|
|
interface StandardHeaderProps {
|
|
title?: string;
|
|
showBack?: boolean;
|
|
}
|
|
|
|
export function StandardHeader({ title, showBack }: StandardHeaderProps) {
|
|
const user = useAuthStore((state) => state.user);
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
// Fallback avatar if user has no profile picture
|
|
const avatarUri =
|
|
user?.avatar ||
|
|
"https://ui-avatars.com/api/?name=" +
|
|
encodeURIComponent(`${user?.firstName} ${user?.lastName}`) +
|
|
"&background=ea580c&color=fff";
|
|
|
|
return (
|
|
<View className="px-5 pt-4 pb-2 flex-row justify-between items-center bg-background">
|
|
<View className="flex-1 flex-row items-center gap-3">
|
|
{showBack && (
|
|
<Pressable
|
|
onPress={() => router.back()}
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
>
|
|
<ArrowLeft color={isDark ? "#f1f5f9" : "#0f172a"} size={20} />
|
|
</Pressable>
|
|
)}
|
|
|
|
{!title ? (
|
|
<View className="flex-row items-center gap-3 ml-1">
|
|
<View>
|
|
<Pressable
|
|
onPress={() => router.push("/profile")}
|
|
className="h-[40px] w-[40px] rounded-full overflow-hidden"
|
|
>
|
|
<Image source={{ uri: avatarUri }} className="h-full w-full" />
|
|
</Pressable>
|
|
</View>
|
|
<View>
|
|
<Text
|
|
variant="muted"
|
|
className="text-[10px] uppercase tracking-widest font-bold"
|
|
>
|
|
Welcome back,
|
|
</Text>
|
|
<Text variant="h4" className="text-foreground leading-tight">
|
|
{user?.firstName + " " + user?.lastName || "User"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View className="flex-1 items-center mr-10">
|
|
<Text variant="h4" className="text-foreground font-semibold">
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{!title && (
|
|
<ShadowWrapper level="xs">
|
|
<Pressable className="rounded-full p-2.5 border border-border">
|
|
<Bell
|
|
color={isDark ? "#f1f5f9" : "#0f172a"}
|
|
size={20}
|
|
strokeWidth={2}
|
|
/>
|
|
</Pressable>
|
|
</ShadowWrapper>
|
|
)}
|
|
|
|
{title && <View className="w-0" />}
|
|
</View>
|
|
);
|
|
}
|