site_logiciels/components/Common/Share.vue

<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 type { 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://messenger.com`
      },
      {
        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: 32px;
    margin: 0.5rem 0.3rem;
    color: #808080;
  }

  a:hover i {
    color: inherit;
  }
}
</style>