Basic layout and navigation

src/components/FlashCard.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+
+import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
+
+const emit = defineEmits<{(e:"back"):void}>();
+
+const back = () => {
+  emit("back");
+}
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header class="two-column">
+      <div class="header-column">
+        <ion-card-title>FLASH</ion-card-title>
+        <ion-card-title>Board</ion-card-title>
+        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
+      </div>
+<!--      <div style="flex-grow: 1"></div>-->
+<!--      <div>-->
+<!--        <ion-button>Disconnect</ion-button>-->
+<!--      </div>-->
+    </ion-card-header>
+
+    <ion-card-content>
+      <p>v1.1.1 -> v1.1.2</p> <br>
+      <ion-button>Flash</ion-button>
+
+      <ion-button @click="back">Cancel</ion-button>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<style scoped>
+.two-column {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>