feat: add tabs for relay

static/components/relay-details/relay-details.html

@@ -1,4 +1,12 @@
 <div>
+  <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
+    <q-tab name="info" label="Relay Info"></q-tab>
+    <q-tab name="payment" label="Payment"></q-tab>
+    <q-tab name="config" label="Config"></q-tab>
+    <q-tab name="access" label="Access Control"></q-tab>
+  </q-tabs>
+  <q-tab-panels v-model="tab">
+    <q-tab-panel name="info">
       <div class="row items-center q-mt-md q-mb-lg">
         <div class="col-6 q-pr-lg">
           <q-btn
@@ -20,4 +28,15 @@
           >
         </div>
       </div>
+    </q-tab-panel>
+    <q-tab-panel name="payment">
+      <span>yyyy</span>
+    </q-tab-panel>
+    <q-tab-panel name="config">
+      <span>zzz</span>
+    </q-tab-panel>
+    <q-tab-panel name="access">
+      <span>qqq</span>
+    </q-tab-panel>
+  </q-tab-panels>
 </div>

static/components/relay-details/relay-details.js

@@ -7,7 +7,7 @@ async function relayDetails(path) {
     props: ['relay-id', 'adminkey', 'inkey'],
     data: function () {
       return {
-        items: [],
+        tab: 'info',
         formDialogItem: {
           show: false,
           data: {