add the Share component

components/Common/Share.vue

@@ -0,0 +1,86 @@
+<template>
+  <div v-if="url" class="share">
+    <nuxt-link
+      v-for="network in networks"
+      :key="network.name"
+      :href="network.url"
+      target="_blank"
+      :style="{ color: network.colorOnHover }"
+    >
+      <v-icon :icon="network.icon"/>
+    </nuxt-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { SocialNetworkShareBtn } from "~/types/interface";
+
+  const url: Ref<string | null> = ref(null)
+  const networks: Ref<Array<SocialNetworkShareBtn>> = ref([])
+
+  if (process.client) {
+    url.value = window.location.href
+
+    networks.value = [
+      {
+        name: "Facebook",
+        icon: "fa-brands fa-facebook",
+        colorOnHover: "#135fc2",
+        url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url.value)}`
+      },
+      {
+        name: "Twitter",
+        icon: "fa-brands fa-twitter",
+        colorOnHover: "#1781c2",
+        url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url.value)}`
+      },
+      {
+        name: "Messenger",
+        icon: "fa-brands fa-facebook-messenger",
+        colorOnHover: "#0085ff",
+        url: `https://www.facebook.com/dialog/send?link=${encodeURIComponent(url.value)}`
+      },
+      {
+        name: "Instagram",
+        icon: "fa-brands fa-instagram",
+        colorOnHover: "#d0006a",
+        url: "https://instagram.com"
+      },
+      {
+        name: "Linkedin",
+        icon: "fa-brands fa-linkedin",
+        colorOnHover: "#006291",
+        url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url.value)}`
+      },
+      {
+        name: "Email",
+        icon: "fas fa-envelope",
+        colorOnHover: "#292929",
+        url: `mailto:?body=${url.value}`
+      },
+    ]
+  }
+
+</script>
+
+<style scoped lang="scss">
+.share {
+  display: flex;
+  gap: 10px;
+  font-family: "Barlow", serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+
+  i {
+    font-size: 1.9em;
+    margin: 0.5rem 0.3rem;
+    color: #808080;
+  }
+
+  a:hover i {
+    color: inherit;
+  }
+}
+</style>