137 lines
3.4 KiB
TypeScript
137 lines
3.4 KiB
TypeScript
import { useTheme } from '@/components/ThemeContext';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import React from 'react';
|
||
import { ActivityIndicator, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||
|
||
type Props = {
|
||
title?: string;
|
||
description?: string;
|
||
onRefresh?: () => void;
|
||
isRefreshing?: boolean;
|
||
};
|
||
|
||
export default function EmptyState({
|
||
title = 'Maʼlumot topilmadi',
|
||
description = 'Hozircha hech qanday eʼlon mavjud emas',
|
||
onRefresh,
|
||
isRefreshing = false,
|
||
}: Props) {
|
||
const { isDark } = useTheme();
|
||
|
||
const theme = {
|
||
gradientColors: isDark
|
||
? (['#1e293b', '#334155'] as [string, string])
|
||
: (['#EEF2FF', '#E0E7FF'] as [string, string]),
|
||
iconColor: '#6366F1',
|
||
title: isDark ? '#f8fafc' : '#1F2937',
|
||
description: isDark ? '#94a3b8' : '#6B7280',
|
||
buttonBg: '#6366F1',
|
||
buttonText: '#ffffff',
|
||
dotColor: '#6366F1',
|
||
};
|
||
|
||
return (
|
||
<View style={emptyStyles.container}>
|
||
<LinearGradient colors={theme.gradientColors} style={emptyStyles.iconContainer}>
|
||
<Ionicons name="megaphone-outline" size={64} color={theme.iconColor} />
|
||
</LinearGradient>
|
||
|
||
<Text style={[emptyStyles.title, { color: theme.title }]}>{title}</Text>
|
||
<Text style={[emptyStyles.description, { color: theme.description }]}>{description}</Text>
|
||
|
||
{onRefresh && (
|
||
<TouchableOpacity
|
||
style={[emptyStyles.refreshBtn, { backgroundColor: theme.buttonBg }]}
|
||
onPress={onRefresh}
|
||
disabled={isRefreshing}
|
||
activeOpacity={0.8}
|
||
>
|
||
{isRefreshing ? (
|
||
<ActivityIndicator color={theme.buttonText} size="small" />
|
||
) : (
|
||
<>
|
||
<Ionicons name="refresh" size={20} color={theme.buttonText} />
|
||
<Text style={[emptyStyles.refreshText, { color: theme.buttonText }]}>Yangilash</Text>
|
||
</>
|
||
)}
|
||
</TouchableOpacity>
|
||
)}
|
||
|
||
<View style={emptyStyles.decoration}>
|
||
<View style={[emptyStyles.dot, { backgroundColor: theme.dotColor }]} />
|
||
<View
|
||
style={[emptyStyles.dot, emptyStyles.dotMedium, { backgroundColor: theme.dotColor }]}
|
||
/>
|
||
<View
|
||
style={[emptyStyles.dot, emptyStyles.dotSmall, { backgroundColor: theme.dotColor }]}
|
||
/>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const emptyStyles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingHorizontal: 32,
|
||
},
|
||
iconContainer: {
|
||
width: 120,
|
||
height: 120,
|
||
borderRadius: 60,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
marginBottom: 24,
|
||
},
|
||
title: {
|
||
fontSize: 20,
|
||
fontWeight: '700',
|
||
textAlign: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
description: {
|
||
fontSize: 15,
|
||
textAlign: 'center',
|
||
lineHeight: 22,
|
||
marginBottom: 24,
|
||
},
|
||
refreshBtn: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
paddingVertical: 12,
|
||
paddingHorizontal: 24,
|
||
borderRadius: 12,
|
||
shadowColor: '#6366F1',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.3,
|
||
shadowRadius: 8,
|
||
elevation: 5,
|
||
minWidth: 140,
|
||
justifyContent: 'center',
|
||
},
|
||
refreshText: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
},
|
||
decoration: {
|
||
flexDirection: 'row',
|
||
gap: 8,
|
||
marginTop: 32,
|
||
},
|
||
dot: {
|
||
width: 8,
|
||
height: 8,
|
||
borderRadius: 4,
|
||
},
|
||
dotMedium: {
|
||
opacity: 0.6,
|
||
},
|
||
dotSmall: {
|
||
opacity: 0.3,
|
||
},
|
||
});
|