fix: add missing share logic

components/app/Footer.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
+const config = useRuntimeConfig()
+
 const webApiStatuses: Ref<WebApiStatuses> = useState('webApiStatuses')
 
 const shareAvailable = computed(() => !!webApiStatuses.value?.['web-share-api'])
+
+async function share() {
+  try {
+    await navigator.share({
+      title: 'WebAPI check',
+      text: 'Simply open this page to test which WebAPIs that are supported on your device.',
+      url: config.public.siteUrl,
+    })
+    useTrackEvent('Share successful')
+  } catch (err: any) {
+    useTrackEvent('Share error', { props: { error: err?.message || 'N/A' } })
+  }
+}
 </script>
 
 <template>
@@ -25,7 +40,11 @@ const shareAvailable = computed(() => !!webApiStatuses.value?.['web-share-api'])
       <Icon name="email" />
       <span>Feedback</span>
     </NuxtLink>
-    <div v-if="shareAvailable" class="footer-item footer-action">
+    <div
+      v-if="shareAvailable"
+      class="footer-item footer-action"
+      @click="share()"
+    >
       <Icon name="share" />
       <span>Share</span>
     </div>

pages/apis/[id].vue

@@ -138,17 +138,17 @@ h1 {
   @apply flex items-center;
   &.available {
     .status-icon {
-      @apply text-lime-600 border-lime-600 dark:(text-lime-300 border-lime-300);
+      @apply text-lime-600 bg-lime-100 border-lime-600 dark:(text-lime-300 bg-lime-500/20 border-lime-300);
     }
   }
   &.experimental {
     .status-icon {
-      @apply text-purple-700 border-purple-700 dark:(text-purple-300 border-purple-300);
+      @apply text-purple-700 bg-purple-100 border-purple-700 dark:(text-purple-300 bg-purple-500/20 border-purple-300);
     }
   }
   &.unavailable {
     .status-icon {
-      @apply text-rose-500 border-rose-500;
+      @apply text-rose-600 bg-rose-100 border-rose-600 dark:(text-rose-500 bg-rose-500/20 border-rose-500);
     }
   }
   .status-icon {

pages/info.vue

@@ -266,7 +266,7 @@ useSeoMeta({
             <p class="mb-6 text-xl text-dim font-bold">
               Resources
             </p>
-            <ul class="p-0 md:list-disc-inside">
+            <ul class="pl-4 md:pl-0.5 md:list-disc-inside">
               <li>
                 <NuxtLink
                   to="https://developer.mozilla.org"