48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import { Transaction } from '@/types';
|
|
|
|
interface TransactionListProps {
|
|
transactions: Transaction[];
|
|
onDeleteTransaction: (id: string) => void;
|
|
}
|
|
|
|
export default function TransactionList({ transactions, onDeleteTransaction }: TransactionListProps) {
|
|
if (transactions.length === 0) {
|
|
return (
|
|
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
|
|
<p className="text-center text-gray-500">Keine Transaktionen vorhanden</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full max-w-md bg-white p-6 rounded-lg shadow-md">
|
|
<h2 className="text-xl font-bold mb-4">Transaktionen</h2>
|
|
<ul className="divide-y divide-gray-200">
|
|
{transactions.map((transaction) => (
|
|
<li key={transaction.id} className="py-4">
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<p className="font-medium">{transaction.description}</p>
|
|
<p className="text-sm text-gray-500">{transaction.date}</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className={`font-medium ${transaction.type === 'income' ? 'text-green-600' : 'text-red-600'}`}>
|
|
{transaction.type === 'income' ? '+' : '-'} {transaction.amount.toFixed(2)} €
|
|
</span>
|
|
<button
|
|
onClick={() => onDeleteTransaction(transaction.id)}
|
|
className="text-gray-400 hover:text-red-500"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|