Update search result page layout

.nvmrc

@@ -0,0 +1 @@
+16

src/components/Articles.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1>Filter 'learn Vue' Articles</h1>
+    <h1>Filter 'learn Vue' resources</h1>
     <input
       type='text'
       placeholder='Filter Titles'

src/components/SearchResults.vue

@@ -1,11 +1,24 @@
 <template>
     <h2>Zoekresultaten</h2>
     <p>Er zijn {{ filteredTitles.length }} titels gevonden.</p>
-    <ul>
-        <li v-for="title in filteredTitles">
-            {{ title.Name }}
-        </li>
-    </ul>
+    <table
+        v-if="filteredTitles.length > 0"
+        class="table">
+        <thead>
+            <tr>
+                <th>Titel</th>
+                <th>Link</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="title in filteredTitles" :key="title.Id">
+                <td>{{ title.Name }}</td>
+                <td>
+                    <a :href="title.Page" target="_blank">Link</a>
+                </td>
+            </tr>
+        </tbody>
+    </table>
 </template>
 
 <script setup>
@@ -14,8 +27,26 @@ const { filteredTitles } = useData();
 </script>
 
 <style scoped>
-ul {
-    list-style-type: none;
-    padding: 0;
+.table {
+    width: 50vw;
+    margin-bottom: 1rem;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.table th, .table td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-top: 1px solid #dee2e6;
+    text-align: left;
+}
+h2 {
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 1.2;
+    background-color: cadetblue;
+    color: white;
 }
 </style>

src/index.css

@@ -1,11 +0,0 @@
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-#app .results {
-    text-align: left;
-}