84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import ChevronLeft from "@/assets/icons/chevron_left.svg";
|
|
|
|
type HeaderProps = {
|
|
title: string;
|
|
showBackButton?: boolean;
|
|
onBackPress?: () => void;
|
|
rightComponent?: React.ReactNode;
|
|
};
|
|
|
|
const Header: React.FC<HeaderProps> = ({
|
|
title,
|
|
showBackButton = false,
|
|
onBackPress,
|
|
rightComponent,
|
|
}) => {
|
|
const navigation = useNavigation();
|
|
const insets = useSafeAreaInsets(); // get safe area insets
|
|
|
|
const handleBack = () => {
|
|
if (onBackPress) {
|
|
onBackPress();
|
|
} else {
|
|
navigation.goBack();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
{/* Left side */}
|
|
<View style={styles.leftContainer}>
|
|
{showBackButton && (
|
|
<TouchableOpacity style={styles.backButton} onPress={handleBack}>
|
|
<ChevronLeft width={24} height={24} />
|
|
</TouchableOpacity>
|
|
)}
|
|
<Text style={styles.title}>{title}</Text>
|
|
</View>
|
|
|
|
{/* Right side */}
|
|
{rightComponent && (
|
|
<View style={styles.rightContainer}>{rightComponent}</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: "100%",
|
|
height: 56,
|
|
backgroundColor: "#F3F5F8",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 8,
|
|
},
|
|
leftContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
backButton: {
|
|
width: 40,
|
|
height: 40,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
title: {
|
|
marginLeft: 8,
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
color: "#252A34",
|
|
},
|
|
rightContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
});
|