feat: add SocialShare component to ShareLinks component

Author: JamieSlome

app.vue

@@ -26,7 +26,7 @@
         <div v-else-if="domain">
           No results could be fetched. Is it a valid domain?
         </div>
-        <TheShareLink v-if="crux || lighthouse" :domain="domain" :type="crux ? 'crux' : 'pagespeed-insights'"
+        <ShareLinks v-if="crux || lighthouse" :domain="domain" :type="crux ? 'crux' : 'pagespeed-insights'"
           :timestamp="crux && cruxStatus !== 'pending' ? crux.timestamp : lighthouse && lighthouseStatus !== 'pending' ? lighthouse.timestamp : undefined" />
         <details class="max-w-[500px] text-gray-400">
           <summary class="cursor-pointer">

components/TheShareLink.vue renamed to components/ShareLinks.vue

@@ -15,7 +15,6 @@ const text = computed(() => props.domain
 
 const canonicalURL = computed(() => props.domain ? joinURL(`https://page-speed.dev`, props.domain) : 'https://page-speed.dev')
 const shareLink = computed(() =>
-  'https://twitter.com/intent/tweet?text=' +
   (props.domain ? encodeURIComponent([text.value, canonicalURL.value].join('\n\n')) : text.value)
 )
 
@@ -38,11 +37,18 @@ async function nativeShare () {
 
 <template>
   <div class="flex flex-col gap-2 mt-auto md:mt-8">
-    <NuxtLink type="submit"
-      class="bg-green-400 text-black hover: hover:bg-white focus:bg-white active:bg-white text-xl md:text-2xl py-2 px-6 md:self-start mb-8"
-      :href="shareLink" @click.prevent="nativeShare">
-      share results
-    </NuxtLink>
+    <div class="self-start text-gray-400">Share results</div>
+    <div class="flex flex-row gap-2 mb-7">
+      <SocialShare
+        v-for="network in ['twitter', 'whatsapp', 'telegram', 'reddit', 'pocket', 'email']"
+        :key="network"
+        :network="network"
+        :styled="true"
+        :label="false"
+        class="p-3 rounded-full opacity-70 hover:opacity-100"
+        :url="shareLink"
+      />
+    </div>
     <a v-if="type === 'crux'"
       :href="`https://lookerstudio.google.com/c/u/0/reporting/bbc5698d-57bb-4969-9e07-68810b9fa348/page/keDQB?params=%7B%22origin%22:%22https://${domain}%22%7D`"
       class="self-start underline text-gray-400 hover:text-green-400 focus:text-green-400 active:text-green-400">