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 { Ref } from "vue";
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-size: 16px;
  font-weight: 400;
  line-height: 28px;

  i {
    font-size: 32px;
    margin: 0.5rem 0.3rem;
    color: var(--primary-color);
  }

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