WIP

Update content to match app requirements.

ui/src/components/AllowedServers.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import TableComponent from './TableComponent.vue';
 const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRows: any[][] }>()
 </script>
 <template>
@@ -6,31 +7,8 @@ const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRow
         <h1 class="text-xl normal-case">Allowed Servers</h1>
         <button class="btn btn-circle btn-success">Add</button>
     </div>
-    <div class="overflow-x-auto">
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
-        <table class="table w-full">
-            <!-- head -->
-            <thead>
-                <tr>
-                    <template v-for="header in tableHeader">
-                        <th>{{ header }}</th>
-                    </template>
-                    <th>Action</th>
-                </tr>
-            </thead>
-            <tbody>
-                <!-- row -->
-                <tr>
-                    <template v-for="rows in tableRows">
-                        <template v-for="data in rows">
-                            <th>{{ data }}</th>
-                        </template>
-                    </template>
-                    <th>
         <button class="btn btn-sm btn-info m-1">Edit</button>
         <button class="btn btn-sm btn-error m-1">Delete</button>
-                    </th>
+    </TableComponent>
-                </tr>
-            </tbody>
-        </table>
-    </div>
 </template>

ui/src/components/Nav.vue

@@ -2,7 +2,7 @@
   <header>
     <div class="navbar bg-base-100">
       <div class="flex-1">
-        <a class="btn btn-ghost normal-case text-xl">daisyUI</a>
+        <a class="btn btn-ghost normal-case text-xl"><RouterLink to="/">dchat</RouterLink></a>
       </div>
       <div class="flex-none">
         <ul class="menu menu-horizontal px-1">
@@ -11,11 +11,6 @@
               <RouterLink to="/login">Login</RouterLink>
             </a>
           </li>
-          <li>
-            <a>
-              <RouterLink to="/">Home</RouterLink>
-            </a>
-          </li>
         </ul>
       </div>
     </div>

ui/src/components/TableComponent.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRows: any[][] }>()
+</script>
+<template>
+    <div class="overflow-x-auto">
+        <table class="table w-full">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <template v-for="header in tableHeader">
+                        <th>{{ header }}</th>
+                    </template>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- row -->
+                <tr>
+                    <template v-for="rows in tableRows">
+                        <template v-for="data in rows">
+                            <th>{{ data }}</th>
+                        </template>
+                    </template>
+                    <th>
+                        <slot />
+                    </th>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>

ui/src/layouts/DefaultLayout.vue

@@ -0,0 +1,9 @@
+<template>
+    <Nav />
+    <slot />
+</template>
+
+<script setup>
+import Nav from "../components/Nav.vue"
+
+</script>

ui/src/views/HomeView.vue

@@ -1,10 +1,11 @@
 <template>
-    <Nav />
+    <DefaultLayout>
         <AllowedServers :tableHeader="tableHeader" :tableRows="tableRows" />
+    </DefaultLayout>
 </template>
 
 <script setup>
-import Nav from "../components/Nav.vue"
+import DefaultLayout from "../layouts/DefaultLayout.vue"
 import AllowedServers from "../components/AllowedServers.vue"
 
 const tableHeader = ["ID", "User", "Comment", "Date"]

ui/src/views/servers/AllowedServersView.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import DefaultLayout from "../../layouts/DefaultLayout.vue"
+</script>
+<template>
+<DefaultLayout>
+    
+</DefaultLayout>
+</template>