132 lines
4.1 KiB
TypeScript
132 lines
4.1 KiB
TypeScript
import { View, Image, Pressable, useColorScheme } from "react-native";
|
|
import { Text } from "@/components/ui/text";
|
|
import {
|
|
ArrowLeft,
|
|
Bell,
|
|
Settings,
|
|
Info,
|
|
DraftingCompass as EditIcon,
|
|
} from "@/lib/icons";
|
|
import { useAuthStore } from "@/lib/auth-store";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
|
|
interface StandardHeaderProps {
|
|
title?: string;
|
|
showBack?: boolean;
|
|
rightAction?: "notificationsSettings" | "companyInfo" | "edit";
|
|
onRightActionPress?: () => void;
|
|
}
|
|
|
|
export function StandardHeader({
|
|
title,
|
|
showBack,
|
|
rightAction,
|
|
onRightActionPress,
|
|
}: StandardHeaderProps) {
|
|
const user = useAuthStore((state) => state.user);
|
|
const colorScheme = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
|
|
// 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";
|
|
|
|
const iconColor = isDark ? "#f1f5f9" : "#0f172a";
|
|
|
|
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={() => nav.back()}
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
>
|
|
<ArrowLeft color={iconColor} size={20} />
|
|
</Pressable>
|
|
)}
|
|
|
|
{!title ? (
|
|
<View className="flex-row items-center gap-3 ml-1">
|
|
<View>
|
|
<Pressable
|
|
onPress={() => nav.go("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 ">
|
|
<Text variant="h4" className="text-foreground font-semibold">
|
|
{title}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{!title && (
|
|
<Pressable
|
|
className="rounded-full p-2.5 border border-border"
|
|
onPress={() => nav.go("notifications/index")}
|
|
>
|
|
<Bell color={iconColor} size={20} strokeWidth={2} />
|
|
</Pressable>
|
|
)}
|
|
|
|
{title && (
|
|
<View className="w-10 items-end">
|
|
{rightAction === "notificationsSettings" ? (
|
|
<Pressable
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
onPress={() =>
|
|
onRightActionPress
|
|
? onRightActionPress()
|
|
: nav.go("notifications/settings")
|
|
}
|
|
>
|
|
<Settings color={iconColor} size={18} />
|
|
</Pressable>
|
|
) : rightAction === "companyInfo" ? (
|
|
<Pressable
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
onPress={() =>
|
|
onRightActionPress
|
|
? onRightActionPress()
|
|
: nav.go("company-details")
|
|
}
|
|
>
|
|
<Info color={iconColor} size={18} />
|
|
</Pressable>
|
|
) : rightAction === "edit" ? (
|
|
<Pressable
|
|
className="h-10 w-10 rounded-[10px] bg-card items-center justify-center border border-border"
|
|
onPress={onRightActionPress}
|
|
>
|
|
<EditIcon color={iconColor} size={18} />
|
|
</Pressable>
|
|
) : (
|
|
<View className="w-0" />
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|