Refactor components. Improve design. Improve routing

src/pages/BoatPage.vue

@@ -1,63 +1,31 @@
 <template>
   <q-page padding>
-    <q-card
-      flat
-      bordered
-      class="my-card"
-      :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
-    >
-      <q-card-section>
-        <div class="row items-center no-wrap">
-          <div class="col">
-            <div class="text-h6">Our Planet</div>
-            <div class="text-subtitle2">by John Doe</div>
-          </div>
-
-          <div class="col-auto">
-            <q-btn color="grey-7" round flat icon="more_vert">
-              <q-menu cover auto-close>
-                <q-list>
-                  <q-item clickable>
-                    <q-item-section>Remove Card</q-item-section>
-                  </q-item>
-                  <q-item clickable>
-                    <q-item-section>Send Feedback</q-item-section>
-                  </q-item>
-                  <q-item clickable>
-                    <q-item-section>Share</q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </div>
-        </div>
-      </q-card-section>
-
-      <q-card-section>
-        <!-- {{ lorem }} -->
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions>
-        <q-btn flat>Action 1</q-btn>
-        <q-btn flat>Action 2</q-btn>
-      </q-card-actions>
-    </q-card>
+    <boat-preview-component :boats="boats" />
   </q-page>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, PropType } from 'vue';
-import { Boat } from 'src/components/models';
+import BoatPreviewComponent from 'src/components/BoatPreviewComponent.vue';
+import { ref } from 'vue';
 
-defineComponent({
-  name: 'BoatPage',
-  props: {
-    boats: {
-      type: Array as PropType<Boat[]>,
-      default: () => [],
-    },
+const boats = ref([
+  {
+    id: 1,
+    name: 'ProjectX',
+    class: 'J/27',
+    year: 1981,
   },
-});
+  {
+    id: 2,
+    name: 'Take5',
+    class: 'J/27',
+    year: 1985,
+  },
+  {
+    id: 3,
+    name: 'WeeBeestie',
+    class: 'Capri 25',
+    year: 1989,
+  },
+]);
 </script>