72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { ChevronLeft } from 'lucide-react-native';
|
|
import { Typography } from './Typography';
|
|
import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
|
|
import { THEME } from '../../constants/theme';
|
|
|
|
interface HeaderProps {
|
|
title: string;
|
|
showBack?: boolean;
|
|
rightComponent?: React.ReactNode;
|
|
onBack?: () => void;
|
|
}
|
|
|
|
export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent, onBack }) => {
|
|
const navigation = useNavigation();
|
|
const { screenPadding } = useResponsiveLayout();
|
|
|
|
return (
|
|
<View style={[styles.header, { paddingHorizontal: screenPadding }]}>
|
|
<View style={styles.leftContainer}>
|
|
{showBack && (
|
|
<TouchableOpacity
|
|
onPress={() => onBack ? onBack() : navigation.goBack()}
|
|
style={styles.backButton}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
>
|
|
<ChevronLeft color="#FFF" size={26} strokeWidth={2.5} />
|
|
</TouchableOpacity>
|
|
)}
|
|
<Typography variant="h3" weight="bold" style={styles.title}>
|
|
{title}
|
|
</Typography>
|
|
</View>
|
|
{rightComponent && (
|
|
<View style={styles.rightContainer}>
|
|
{rightComponent}
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 16,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: THEME.colors.primary, // Primary brand color
|
|
},
|
|
leftContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
rightContainer: {
|
|
justifyContent: 'center',
|
|
},
|
|
backButton: {
|
|
marginRight: 12,
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
color: '#FFFFFF',
|
|
}
|
|
});
|