Programmatically build links. Styling Changes

src/pages/BoatPage.vue

@@ -0,0 +1,63 @@
+<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>
+  </q-page>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, PropType } from 'vue';
+import { Boat } from 'src/components/models';
+
+defineComponent({
+  name: 'BoatPage',
+  props: {
+    boats: {
+      type: Array as PropType<Boat[]>,
+      default: () => [],
+    },
+  },
+});
+</script>

src/pages/IndexPage.vue

@@ -1,48 +1,28 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page class="row justify-center">
     <q-img alt="OYS Logo" src="~assets/oysqn_logo.png" fit="scale-down" />
+    <q-list class="full-width">
+      <q-item v-for="link in links" :key="link.name">
+        <q-btn
+          :icon="link.icon"
+          color="primary"
+          :size="`1.5em`"
+          :to="link.to"
+          :label="link.name"
+          rounded
+          class="full-width"
+        />
+      </q-item>
+    </q-list>
   </q-page>
 </template>
 
-<script lang="ts">
-import { Todo, Meta } from 'components/models';
-import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import { links } from 'components/navlinks';
 
-export default defineComponent({
+defineComponent({
   name: 'IndexPage',
   components: {},
-  setup() {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1',
-      },
-      {
-        id: 2,
-        content: 'ct2',
-      },
-      {
-        id: 3,
-        content: 'ct3',
-      },
-      {
-        id: 4,
-        content: 'ct4',
-      },
-      {
-        id: 5,
-        content: 'ct5',
-      },
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200,
-    });
-    return { todos, meta };
-  },
-  data() {
-    return {
-      name: '',
-    };
-  },
 });
 </script>

src/pages/LoginPage.vue

@@ -66,7 +66,6 @@
 </style>
 
 <script setup lang="ts">
-import { AppwriteException } from 'appwrite';
 import { ref } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { useRouter } from 'vue-router';

src/pages/admin/BoatAdminPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>

src/pages/admin/UserAdminPage.vue

@@ -0,0 +1,8 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>