hoppscotch/packages/hoppscotch-app/components/app/Share.vue

<template>
  <SmartModal
    v-if="show"
    :title="$t('app.invite_your_friends')"
    @close="hideModal"
  >
    <template #body>
      <p class="text-secondaryLight mb-8 px-2">
        {{ $t("app.invite_description") }}
      </p>
      <div class="flex flex-col space-y-2 px-2">
        <div class="grid gap-4 grid-cols-3">
          <a
            v-for="(platform, index) in platforms"
            :key="`platform-${index}`"
            :href="platform.link"
            target="_blank"
            class="share-link"
          >
            <SmartIcon :name="platform.icon" class="h-6 w-6" />
            <span class="mt-3">
              {{ platform.name }}
            </span>
          </a>
          <button class="share-link" @click="copyAppLink">
            <SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
            <span class="mt-3">
              {{ $t("app.copy") }}
            </span>
          </button>
        </div>
      </div>
    </template>
  </SmartModal>
</template>

<script setup lang="ts">
import { ref, useContext } from "@nuxtjs/composition-api"
import { copyToClipboard } from "~/helpers/utils/clipboard"

const {
  $toast,
  app: { i18n },
} = useContext()
const t = i18n.t.bind(i18n)

defineProps<{
  show: Boolean
}>()

const emit = defineEmits<{
  (e: "hide-modal"): void
}>()

const url = "https://hoppscotch.io"
const text = "Hoppscotch - Open source API development ecosystem."
const description =
  "Helps you create requests faster, saving precious time on development."
const subject = "Checkout Hoppscotch - an open source API development ecosystem"
const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
const twitter = "hoppscotch_io"

const copyIcon = ref("copy")
const platforms = [
  {
    name: "Email",
    icon: "mail",
    link: `mailto:?subject=${subject}&body=${summary}`,
  },
  {
    name: "Twitter",
    icon: "brands/twitter",
    link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
  },
  {
    name: "Facebook",
    icon: "brands/facebook",
    link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
  },
  {
    name: "Reddit",
    icon: "brands/reddit",
    link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
  },
  {
    name: "LinkedIn",
    icon: "brands/linkedin",
    link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
  },
]

const copyAppLink = () => {
  copyToClipboard(url)
  copyIcon.value = "check"
  $toast.success(t("state.copied_to_clipboard").toString(), {
    icon: "content_paste",
  })
  setTimeout(() => (copyIcon.value = "copy"), 1000)
}

const hideModal = () => {
  emit("hide-modal")
}
</script>

<style lang="scss" scoped>
.share-link {
  @apply border border-dividerLight;
  @apply rounded;
  @apply flex-col flex;
  @apply p-4;
  @apply items-center;
  @apply justify-center;
  @apply font-semibold;
  @apply hover:(bg-primaryLight text-secondaryDark);
  @apply focus:outline-none;
  @apply focus-visible:border-divider;

  svg {
    @apply opacity-80;
  }

  &:hover {
    svg {
      @apply opacity-100;
    }
  }
}
</style>