forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
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>
|