52 lines
2.3 KiB
TypeScript
52 lines
2.3 KiB
TypeScript
import { FontAwesome } from '@expo/vector-icons';
|
|
import { FlatList, Text, View } from 'react-native';
|
|
import { Transaction } from '../types';
|
|
|
|
interface TransactionListProps {
|
|
transactions: Transaction[];
|
|
onDelete?: (id: number) => void;
|
|
}
|
|
|
|
export default function TransactionList({ transactions, onDelete }: TransactionListProps) {
|
|
if (transactions.length === 0) {
|
|
return (
|
|
<View className="flex-1 justify-center items-center py-10">
|
|
<Text className="text-gray-400 text-lg">No transactions yet</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FlatList
|
|
data={transactions}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
contentContainerStyle={{ paddingBottom: 20 }}
|
|
renderItem={({ item }) => (
|
|
<View className="bg-white dark:bg-gray-800 p-4 mb-3 rounded-2xl shadow-sm flex-row items-center justify-between">
|
|
<View className="flex-row items-center">
|
|
<View className={`w-10 h-10 rounded-full items-center justify-center mr-4 ${item.type === 'expense' ? 'bg-red-100' : 'bg-green-100'}`}>
|
|
<FontAwesome
|
|
name={item.type === 'expense' ? 'arrow-down' : 'arrow-up'}
|
|
size={16}
|
|
color={item.type === 'expense' ? '#EF4444' : '#10B981'}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<Text className="font-bold text-gray-900 dark:text-white text-base">{item.category}</Text>
|
|
<Text className="text-gray-500 text-xs">{item.date}</Text>
|
|
</View>
|
|
</View>
|
|
<View className="items-end">
|
|
<Text className={`font-bold text-base ${item.type === 'expense' ? 'text-red-500' : 'text-green-500'}`}>
|
|
{item.type === 'expense' ? '-' : '+'}€{item.amount.toFixed(2)}
|
|
</Text>
|
|
{item.description && (
|
|
<Text className="text-gray-400 text-xs max-w-[100px]" numberOfLines={1}>{item.description}</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)}
|
|
/>
|
|
);
|
|
}
|