Programmatically build links. Styling Changes

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>