WIP

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">
-        <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>
-                </tr>
-            </tbody>
-        </table>
-    </div>
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
+        <button class="btn btn-sm btn-info m-1">Edit</button>
+        <button class="btn btn-sm btn-error m-1">Delete</button>
+    </TableComponent>
 </template>

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/views/servers/AllowedServersView.vue

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