11.4 Adding List Headers

src/components/Shared/ListHeader.vue

@@ -0,0 +1,21 @@
+<template>
+    <q-banner
+    dense
+    inline-actions
+    class="list-header text-white bg-orange-4 text-center">
+    <span class="text-bold text-subtitle1"><slot /></span>
+</q-banner>
+</template>
+
+<script>
+export default {
+  name: 'ListHeader'
+}
+</script>
+
+<style>
+  .list-header {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+</style>

src/components/Tasks/TasksCompleted.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <list-header>Completed</list-header>
     <q-list
       v-if="Object.keys(tasksCompleted).length"
       separator
@@ -10,17 +12,19 @@
         :task="task"
         :id="key"
       ></task>
-
     </q-list>
+  </div>
 </template>
 
 <script>
 import task from 'components/Tasks/Task.vue'
+import listHeader from 'components/Shared/ListHeader.vue'
 
 export default {
   name: 'TasksCompleted',
   components: {
-    task
+    task,
+    listHeader
   },
   props: [
     'tasksCompleted'

src/components/Tasks/TasksTodo.vue

@@ -1,4 +1,6 @@
 <template>
+  <div>
+    <list-header>Todo</list-header>
     <q-list
       v-if="Object.keys(tasksTodo).length"
       separator
@@ -12,15 +14,18 @@
       ></task>
 
     </q-list>
+  </div>
 </template>
 
 <script>
 import task from 'components/Tasks/Task.vue'
+import listHeader from 'components/Shared/ListHeader.vue'
 
 export default {
   name: 'TasksTodo',
   components: {
-    task
+    task,
+    listHeader
   },
   props: [
     'tasksTodo'