157 lines
3.6 KiB
TypeScript
157 lines
3.6 KiB
TypeScript
import Logo from '@/assets/images/logo.png';
|
|
import LogoText from '@/assets/images/navbar.png';
|
|
import { useTheme } from '@/components/ThemeContext';
|
|
import { user_api } from '@/screens/profile/lib/api';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { router } from 'expo-router';
|
|
import { Bell, LogOut } from 'lucide-react-native';
|
|
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { useAuth } from '../AuthProvider';
|
|
|
|
export const CustomHeader = ({
|
|
logoutbtn = false,
|
|
notif = true,
|
|
}: {
|
|
logoutbtn?: boolean;
|
|
notif?: boolean;
|
|
}) => {
|
|
const { isDark } = useTheme();
|
|
const { logout } = useAuth();
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['notification-list'],
|
|
queryFn: () => user_api.notification_list({ page: 1, page_size: 1 }),
|
|
});
|
|
const unreadCount = data?.data?.data.unread_count ?? 0;
|
|
|
|
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>
|
|
<Image source={LogoText} style={{ width: 160, height: 40, objectFit: 'cover' }} />
|
|
</View>
|
|
{logoutbtn && (
|
|
<TouchableOpacity onPress={logout}>
|
|
<LogOut color={'red'} />
|
|
</TouchableOpacity>
|
|
)}
|
|
{notif && (
|
|
<TouchableOpacity
|
|
onPress={() => router.push('/profile/notification')} // yoki '/notifications' sahifasiga
|
|
style={styles.bellContainer}
|
|
>
|
|
<Bell color={isDark ? '#e2e8f0' : '#334155'} size={24} />
|
|
|
|
{unreadCount > 0 && (
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Agar yuklanayotgan bo'lsa kichik indikator (ixtiyoriy) */}
|
|
{isLoading && unreadCount === 0 && <View style={styles.loadingDot} />}
|
|
</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',
|
|
alignContent: 'center',
|
|
gap: 5,
|
|
},
|
|
|
|
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',
|
|
},
|
|
bellContainer: {
|
|
position: 'relative',
|
|
},
|
|
|
|
badge: {
|
|
position: 'absolute',
|
|
top: -6,
|
|
right: -6,
|
|
minWidth: 18,
|
|
height: 18,
|
|
borderRadius: 9,
|
|
backgroundColor: '#ef4444', // qizil badge
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 4,
|
|
borderWidth: 1.5,
|
|
},
|
|
|
|
badgeText: {
|
|
color: '#ffffff',
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
},
|
|
|
|
loadingDot: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: '#3b82f6',
|
|
opacity: 0.7,
|
|
},
|
|
});
|