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>