Create expenses tracker application with Next.js

src/components/TransactionList.tsx

@@ -0,0 +1,47 @@
+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>
+  );
+}