165 lines
3.9 KiB
TypeScript
165 lines
3.9 KiB
TypeScript
import { Award, Percent } from 'lucide-react-native';
|
|
import { FlatList, StyleSheet, Text, View } from 'react-native';
|
|
import { useProfileData } from '../lib/ProfileDataContext';
|
|
|
|
export function BonusesTab() {
|
|
const { bonuses } = useProfileData();
|
|
|
|
const formatAmount = (amount: number) => {
|
|
return new Intl.NumberFormat('uz-UZ').format(amount) + " so'm";
|
|
};
|
|
|
|
return (
|
|
<FlatList
|
|
data={bonuses}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={styles.list}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.card}>
|
|
<View style={styles.header}>
|
|
<View style={styles.iconContainer}>
|
|
<Award size={24} color="#fbbf24" />
|
|
</View>
|
|
<View style={styles.percentageBadge}>
|
|
<Percent size={14} color="#10b981" />
|
|
<Text style={styles.percentageText}>{item.percentage}%</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.title}>{item.title}</Text>
|
|
<Text style={styles.description}>{item.description}</Text>
|
|
|
|
<View style={styles.divider} />
|
|
|
|
<View style={styles.footer}>
|
|
<View style={styles.amountContainer}>
|
|
<Text style={styles.amountLabel}>Bonus miqdori</Text>
|
|
<Text style={styles.amount}>{formatAmount(item.bonusAmount)}</Text>
|
|
</View>
|
|
<View style={styles.dateContainer}>
|
|
<Text style={styles.dateLabel}>Yaratilgan sana</Text>
|
|
<Text style={styles.date}>
|
|
{new Date(item.createdAt).toLocaleDateString('uz-UZ')}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)}
|
|
ListEmptyComponent={
|
|
<View style={styles.emptyContainer}>
|
|
<Award size={48} color="#475569" />
|
|
<Text style={styles.emptyText}>Hozircha bonuslar yo'q</Text>
|
|
<Text style={styles.emptySubtext}>Faoliyat ko'rsating va bonuslar qo'lga kiriting</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
list: {
|
|
padding: 16,
|
|
gap: 16,
|
|
paddingBottom: 100,
|
|
},
|
|
card: {
|
|
backgroundColor: '#1e293b',
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
gap: 12,
|
|
borderWidth: 1,
|
|
borderColor: '#fbbf2420',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
},
|
|
iconContainer: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: '#fbbf2420',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
percentageBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
backgroundColor: '#10b98120',
|
|
},
|
|
percentageText: {
|
|
fontSize: 16,
|
|
fontWeight: '700' as const,
|
|
color: '#10b981',
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
fontWeight: '700' as const,
|
|
color: '#f8fafc',
|
|
},
|
|
description: {
|
|
fontSize: 14,
|
|
color: '#94a3b8',
|
|
lineHeight: 20,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: '#334155',
|
|
marginVertical: 4,
|
|
},
|
|
footer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
},
|
|
amountContainer: {
|
|
gap: 6,
|
|
},
|
|
amountLabel: {
|
|
fontSize: 13,
|
|
color: '#64748b',
|
|
fontWeight: '500' as const,
|
|
},
|
|
amount: {
|
|
fontSize: 22,
|
|
fontWeight: '700' as const,
|
|
color: '#fbbf24',
|
|
},
|
|
dateContainer: {
|
|
gap: 6,
|
|
alignItems: 'flex-end',
|
|
},
|
|
dateLabel: {
|
|
fontSize: 13,
|
|
color: '#64748b',
|
|
fontWeight: '500' as const,
|
|
},
|
|
date: {
|
|
fontSize: 14,
|
|
color: '#94a3b8',
|
|
fontWeight: '600' as const,
|
|
},
|
|
emptyContainer: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 80,
|
|
gap: 12,
|
|
},
|
|
emptyText: {
|
|
fontSize: 18,
|
|
fontWeight: '600' as const,
|
|
color: '#64748b',
|
|
},
|
|
emptySubtext: {
|
|
fontSize: 14,
|
|
color: '#475569',
|
|
textAlign: 'center',
|
|
paddingHorizontal: 40,
|
|
},
|
|
});
|