93 lines
2.1 KiB
TypeScript
93 lines
2.1 KiB
TypeScript
import Logo from '@/assets/images/logo.png';
|
|
import { useTheme } from '@/components/ThemeContext';
|
|
import { LogOut } from 'lucide-react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { useAuth } from '../AuthProvider';
|
|
|
|
export const CustomHeader = ({ logoutbtn = false }: { logoutbtn?: boolean }) => {
|
|
const { isDark } = useTheme();
|
|
const { t } = useTranslation();
|
|
const { logout } = useAuth();
|
|
|
|
return (
|
|
<View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
|
|
<View style={styles.logoWrapper}>
|
|
<View style={styles.logoContainer}>
|
|
<Image source={Logo} style={styles.logo} />
|
|
</View>
|
|
<Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
|
|
{t('app.name', 'InfoTarget')}
|
|
</Text>
|
|
</View>
|
|
{logoutbtn && (
|
|
<TouchableOpacity onPress={logout}>
|
|
<LogOut color={'red'} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
|
|
darkBg: {
|
|
backgroundColor: '#0f172a',
|
|
borderBottomColor: '#1e293b',
|
|
},
|
|
|
|
lightBg: {
|
|
backgroundColor: '#ffffff',
|
|
borderBottomColor: '#e2e8f0',
|
|
},
|
|
|
|
logoWrapper: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
|
|
logoContainer: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 10,
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 4,
|
|
},
|
|
|
|
logo: {
|
|
width: 32,
|
|
height: 32,
|
|
resizeMode: 'contain',
|
|
},
|
|
|
|
title: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
letterSpacing: 0.3,
|
|
},
|
|
|
|
darkText: {
|
|
color: '#f8fafc',
|
|
},
|
|
|
|
lightText: {
|
|
color: '#0f172a',
|
|
},
|
|
});
|