Extract card and use for budget list

web/src/pages/Dashboard.vue

@@ -1,21 +1,24 @@
 <script lang="ts">
 import NewBudget from '../dialogs/NewBudget.vue';
+import Card from '../components/Card.vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: ["budgetid"],
-    components: { NewBudget }
+    components: { NewBudget, Card }
 })
 </script>
 
 <template>
     <h1>Budgets</h1>
-    <div>
-        <div v-for="budget in $store.getters.Budgets" class="budget-item">
-            <div class="text-h5 grey lighten-2">
-                <router-link v-bind:to="'/budget/'+budget.ID">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</router-link>
-            </div>
-        </div>
+    <div class="flex">
+        <Card v-for="budget in $store.getters.Budgets">
+            <router-link v-bind:to="'/budget/'+budget.ID" class="contents">
+            <!--<svg class="w-24"></svg>-->
+                <p class="w-24 text-center text-6xl"></p>
+                <span class="text-lg">{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span>
+            </router-link>
+        </Card>
         <NewBudget />
     </div>
-</template>
+</template>