From 8eb873d23b5024f64fc1a2dd83335e6470be4353 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 6 Nov 2023 15:24:12 -0500
Subject: [PATCH] Balance component

---
 src/App.vue                | 11 +++++++++--
 src/components/Balance.vue | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f921ace..a52624b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <Header />
   <div class="container">
-    <Balance />
+    <Balance :total="total" />
     <IncomeExpenses />
     <TransactionList :transactions="transactions" />
     <AddTransaction />
@@ -15,7 +15,7 @@ import IncomeExpenses from './components/IncomeExpenses.vue';
 import TransactionList from './components/TransactionList.vue';
 import AddTransaction from './components/AddTransaction.vue';
 
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 const transactions = ref([
   { id: 1, text: 'Flower', amount: -19.99 },
@@ -23,4 +23,11 @@ const transactions = ref([
   { id: 3, text: 'Book', amount: -10 },
   { id: 4, text: 'Camera', amount: 150 },
 ]);
+
+// Get total
+const total = computed(() => {
+  return transactions.value.reduce((acc, transaction) => {
+    return acc + transaction.amount;
+  }, 0);
+});
 </script>
diff --git a/src/components/Balance.vue b/src/components/Balance.vue
index 26ab781..f685476 100644
--- a/src/components/Balance.vue
+++ b/src/components/Balance.vue
@@ -1,4 +1,15 @@
 <template>
   <h4>Your Balance</h4>
-  <h1 id="balance">$0.00</h1>
+  <h1 id="balance">${{ total }}</h1>
 </template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  total: {
+    type: Number,
+    required: true,
+  },
+});
+</script>