From 226b5fb53408a20397a54b77d80930a0a54527a5 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 6 Nov 2023 15:23:02 -0500
Subject: [PATCH] Transaction List

---
 src/App.vue                        | 11 ++++++++++-
 src/components/TransactionList.vue | 23 ++++++++++++++++++-----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a6aa3d4..f921ace 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
   <div class="container">
     <Balance />
     <IncomeExpenses />
-    <TransactionList />
+    <TransactionList :transactions="transactions" />
     <AddTransaction />
   </div>
 </template>
@@ -14,4 +14,13 @@ import Balance from './components/Balance.vue';
 import IncomeExpenses from './components/IncomeExpenses.vue';
 import TransactionList from './components/TransactionList.vue';
 import AddTransaction from './components/AddTransaction.vue';
+
+import { ref } from 'vue';
+
+const transactions = ref([
+  { id: 1, text: 'Flower', amount: -19.99 },
+  { id: 2, text: 'Salary', amount: 299.97 },
+  { id: 3, text: 'Book', amount: -10 },
+  { id: 4, text: 'Camera', amount: 150 },
+]);
 </script>
diff --git a/src/components/TransactionList.vue b/src/components/TransactionList.vue
index 9883271..8c3afb7 100644
--- a/src/components/TransactionList.vue
+++ b/src/components/TransactionList.vue
@@ -1,11 +1,24 @@
 <template>
   <h3>History</h3>
   <ul id="list" class="list">
-    <li class="minus">
-      Cash <span>-$400</span><button class="delete-btn">x</button>
-    </li>
-    <li class="plus">
-      Salary <span>+$1000</span><button class="delete-btn">x</button>
+    <li
+      v-for="transaction in transactions"
+      :key="transaction.id"
+      :class="transaction.amount < 0 ? 'minus' : 'plus'"
+    >
+      {{ transaction.text }} <span>${{ transaction.amount }}</span
+      ><button class="delete-btn">x</button>
     </li>
   </ul>
 </template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  transactions: {
+    type: Array,
+    required: true,
+  },
+});
+</script>