96 lines
2.5 KiB
TypeScript
96 lines
2.5 KiB
TypeScript
/*
|
|
* File: SettingsHeader.tsx
|
|
* Description: Header component for the settings screen
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Feather';
|
|
import { theme } from '../../../theme/theme';
|
|
|
|
/**
|
|
* SettingsHeaderProps Interface
|
|
*
|
|
* Purpose: Defines the props required by the SettingsHeader component
|
|
*
|
|
* Props:
|
|
* - title: Title text to display in the header
|
|
* - showBackButton: Whether to show the back button (optional)
|
|
* - onBackPress: Function to call when back button is pressed (optional)
|
|
*/
|
|
interface SettingsHeaderProps {
|
|
title: string;
|
|
showBackButton?: boolean;
|
|
onBackPress?: () => void;
|
|
}
|
|
|
|
/**
|
|
* SettingsHeader Component
|
|
*
|
|
* Purpose: Displays the header for the settings screen
|
|
*
|
|
* Features:
|
|
* - Clean, minimal header design
|
|
* - Consistent with app theme
|
|
* - Proper spacing and typography
|
|
*/
|
|
export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
|
|
title,
|
|
showBackButton = false,
|
|
onBackPress
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
{showBackButton && onBackPress && (
|
|
<TouchableOpacity
|
|
style={styles.backButton}
|
|
onPress={onBackPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Icon name="chevron-left" size={24} color={theme.colors.primary} />
|
|
</TouchableOpacity>
|
|
)}
|
|
<Text style={styles.title}>{title}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES SECTION
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
// Main container for the header
|
|
container: {
|
|
backgroundColor: theme.colors.background,
|
|
paddingHorizontal: theme.spacing.md,
|
|
paddingVertical: theme.spacing.md,
|
|
borderBottomColor: theme.colors.border,
|
|
borderBottomWidth: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
// Back button styling
|
|
backButton: {
|
|
marginRight: theme.spacing.md,
|
|
padding: theme.spacing.xs,
|
|
},
|
|
|
|
// Title text styling
|
|
title: {
|
|
fontSize: theme.typography.fontSize.displayMedium,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.textPrimary,
|
|
flex: 1,
|
|
},
|
|
});
|
|
|
|
/*
|
|
* End of File: SettingsHeader.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|