AstralRinth/apps/frontend/src/components/ui/ShareArticleButtons.vue

<template>
  <div class="flex gap-2">
    <ButtonStyled circular>
      <a
        v-tooltip="`Share on Bluesky`"
        :href="`https://bsky.app/intent/compose?text=${encodedUrl}`"
        target="_blank"
      >
        <BlueskyIcon />
      </a>
    </ButtonStyled>
    <ButtonStyled circular>
      <a
        v-tooltip="`Share on Mastodon`"
        :href="`https://tootpick.org/#text=${encodedUrl}`"
        target="_blank"
      >
        <MastodonIcon />
      </a>
    </ButtonStyled>
    <ButtonStyled circular>
      <a
        v-tooltip="`Share on X`"
        :href="`https://www.x.com/intent/post?url=${encodedUrl}`"
        target="_blank"
      >
        <TwitterIcon />
      </a>
    </ButtonStyled>
    <ButtonStyled circular>
      <a
        v-tooltip="`Share via email`"
        :href="`mailto:${encodedTitle ? `?subject=${encodedTitle}&` : `?`}body=${encodedUrl}`"
        target="_blank"
      >
        <MailIcon />
      </a>
    </ButtonStyled>
    <ButtonStyled circular>
      <button
        v-tooltip="copied ? `Copied to clipboard` : `Copy link`"
        :disabled="copied"
        class="relative grid place-items-center overflow-hidden"
        @click="copyToClipboard(url)"
      >
        <CheckIcon
          class="absolute transition-all ease-in-out"
          :class="copied ? 'translate-y-0' : 'translate-y-7'"
        />
        <LinkIcon
          class="absolute transition-all ease-in-out"
          :class="copied ? '-translate-y-7' : 'translate-y-0'"
        />
      </button>
    </ButtonStyled>
  </div>
</template>

<script setup lang="ts">
import {
  BlueskyIcon,
  CheckIcon,
  LinkIcon,
  MailIcon,
  MastodonIcon,
  TwitterIcon,
} from "@modrinth/assets";
import { ButtonStyled } from "@modrinth/ui";

const props = defineProps<{
  title?: string;
  url: string;
}>();

const copied = ref(false);
const encodedUrl = computed(() => encodeURIComponent(props.url));
const encodedTitle = computed(() => (props.title ? encodeURIComponent(props.title) : undefined));

async function copyToClipboard(text: string) {
  await navigator.clipboard.writeText(text);
  copied.value = true;
  setTimeout(() => {
    copied.value = false;
  }, 3000);
}
</script>