refactor: lnbits-wallet-ads, ads on wallet page (#3534)

lnbits/templates/components.vue

@@ -19,6 +19,7 @@ include('components/lnbits-manage-extension-list.vue') %} {%
 include('components/lnbits-manage-wallet-list.vue') %} {%
 include('components/lnbits-language-dropdown.vue') %} {%
 include('components/lnbits-payment-list.vue') %} {%
+include('components/lnbits-wallet-ads.vue') %} {%
 include('components/lnbits-wallet-new.vue') %} {%
 include('components/lnbits-wallet-api-docs.vue') %} {%
 include('components/lnbits-wallet-share.vue') %}

lnbits/templates/components/lnbits-wallet-ads.vue

@@ -0,0 +1,21 @@
+<template id="lnbits-wallet-ads">
+  <q-card v-if="adSpaceEnabled">
+    <q-card-section>
+      <h6 v-text="adSpaceTitle" class="text-subtitle1 q-mt-none q-mb-sm"></h6>
+    </q-card-section>
+    <q-card-section class="q-pa-none" v-for="ad in ads">
+      <a
+        style="display: inline-block"
+        :href="ad[0]"
+        class="q-ml-md q-mb-xs q-mr-md"
+      >
+        <img
+          style="max-width: 100%; height: auto"
+          v-if="$q.dark.isActive"
+          :src="ad[1]"
+        />
+        <img v-else :src="ad[2]" style="max-width: 100%; height: auto" />
+      </a>
+    </q-card-section>
+  </q-card>
+</template>