101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
|
import { COLORS, SPACING } from "@/constants/theme";
|
||
|
|
import { useAuth } from "@/contexts/AuthContext";
|
||
|
|
import { useRouter } from "expo-router";
|
||
|
|
import React from "react";
|
||
|
|
import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
||
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
title: string;
|
||
|
|
showHomeButton?: boolean;
|
||
|
|
showLogoutButton?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Header({
|
||
|
|
title,
|
||
|
|
showHomeButton = false,
|
||
|
|
showLogoutButton = false,
|
||
|
|
}: HeaderProps) {
|
||
|
|
const router = useRouter();
|
||
|
|
const { logout } = useAuth();
|
||
|
|
const insets = useSafeAreaInsets();
|
||
|
|
|
||
|
|
const handleHome = () => {
|
||
|
|
router.replace("/home");
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleLogout = () => {
|
||
|
|
Alert.alert("Sair", "Tem certeza que deseja sair?", [
|
||
|
|
{ text: "Cancelar", style: "cancel" },
|
||
|
|
{
|
||
|
|
text: "Sair",
|
||
|
|
style: "destructive",
|
||
|
|
onPress: async () => {
|
||
|
|
try {
|
||
|
|
await logout();
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Logout error:", error);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||
|
|
<View style={styles.content}>
|
||
|
|
<Text style={styles.title}>{title}</Text>
|
||
|
|
|
||
|
|
<View style={styles.actions}>
|
||
|
|
{showHomeButton && (
|
||
|
|
<TouchableOpacity onPress={handleHome} style={styles.button}>
|
||
|
|
<Text style={styles.buttonText}>🏠</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{showLogoutButton && (
|
||
|
|
<TouchableOpacity onPress={handleLogout} style={styles.button}>
|
||
|
|
<Text style={styles.buttonText}>🚪</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: COLORS.headerBackground,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
borderBottomColor: COLORS.headerBorder,
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingHorizontal: SPACING.lg,
|
||
|
|
paddingVertical: SPACING.md,
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
fontSize: 20,
|
||
|
|
fontWeight: "700",
|
||
|
|
color: COLORS.headerText,
|
||
|
|
},
|
||
|
|
actions: {
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: SPACING.md,
|
||
|
|
},
|
||
|
|
button: {
|
||
|
|
paddingHorizontal: SPACING.md,
|
||
|
|
paddingVertical: SPACING.sm,
|
||
|
|
borderRadius: 8,
|
||
|
|
backgroundColor: COLORS.surface,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: COLORS.border,
|
||
|
|
},
|
||
|
|
buttonText: {
|
||
|
|
fontSize: 18,
|
||
|
|
},
|
||
|
|
});
|