49 lines
1.0 KiB
TypeScript
49 lines
1.0 KiB
TypeScript
import { BackButton } from '@/components/ui/back-button';
|
|
import { router } from 'expo-router';
|
|
import React, { ReactNode } from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
type HeaderProps = {
|
|
title: string;
|
|
onBack?: () => void;
|
|
rightElement?: ReactNode;
|
|
};
|
|
|
|
export function Header({ title, onBack = () => router.back(), rightElement }: HeaderProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<BackButton onPress={onBack} />
|
|
|
|
<Text style={styles.title} numberOfLines={1}>
|
|
{title}
|
|
</Text>
|
|
|
|
{rightElement ?? <View style={styles.placeholder} />}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 0,
|
|
paddingTop: 8,
|
|
paddingBottom: 8,
|
|
gap: 12,
|
|
},
|
|
title: {
|
|
flex: 1,
|
|
textAlign: 'center',
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
color: '#FFFFFF',
|
|
letterSpacing: 0.4,
|
|
},
|
|
placeholder: {
|
|
width: 48,
|
|
height: 48,
|
|
},
|
|
});
|