Basic Task Display

src/components/task/TaskComponent.vue

@@ -1,6 +1,23 @@
 <template>
-  <div>My component</div>
+  <q-item-section>
+    <q-item-label overline>{{ task.title }}</q-item-label>
+    <q-item-label caption lines="2">{{ task.description }} </q-item-label>
+    <q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
+  </q-item-section>
+  <q-expansion-item
+    v-if="task.subtasks && task.subtasks.length"
+    expand-separator
+    label="Subtasks"
+    default-opened
+  >
+    <TaskListComponent :tasks="task.subtasks" />
+  </q-expansion-item>
+  <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
 </template>
 
 <script setup lang="ts">
+import { defineProps } from 'vue';
+import type { Task } from 'src/stores/task';
+
+const props = defineProps<{ task: Task }>();
 </script>