2024-06-21 04:46:24 +00:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { VPButton } from "vitepress/theme";
|
|
|
|
import { useClipboard } from "@vueuse/core";
|
|
|
|
|
|
|
|
const email = "m@mjfs.us";
|
|
|
|
const discord = "zettam";
|
|
|
|
const formattedDiscord = "zettam on Discord";
|
|
|
|
const discordLink = "https://discord.com/users/145338365133193226/";
|
|
|
|
|
|
|
|
const { text, copy, isSupported } = useClipboard();
|
2024-06-22 03:18:40 +00:00
|
|
|
|
|
|
|
const copiedMsg = (text: string) => `Copied ${text} to clipboard`;
|
2024-06-21 04:46:24 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2024-06-21 22:24:54 +00:00
|
|
|
<div v-if="isSupported" class="container">
|
2024-06-21 04:46:24 +00:00
|
|
|
<VPButton
|
|
|
|
theme="brand"
|
|
|
|
class="button"
|
2024-06-22 03:18:40 +00:00
|
|
|
:text="text === email ? copiedMsg(email) : 'E-mail'"
|
2024-06-21 04:46:24 +00:00
|
|
|
@click="copy(email)"
|
|
|
|
/>
|
|
|
|
<VPButton
|
|
|
|
theme="alt"
|
|
|
|
class="button"
|
2024-06-22 03:18:40 +00:00
|
|
|
:text="text === discord ? copiedMsg(discord) : 'Discord'"
|
2024-06-21 04:46:24 +00:00
|
|
|
@click="copy(discord)"
|
|
|
|
/>
|
|
|
|
</div>
|
2024-06-21 22:24:54 +00:00
|
|
|
<div v-else class="container">
|
2024-06-21 04:46:24 +00:00
|
|
|
<VPButton
|
|
|
|
theme="brand"
|
|
|
|
class="button"
|
|
|
|
:href="`mailto:${email}`"
|
|
|
|
:text="email"
|
|
|
|
/>
|
|
|
|
<VPButton
|
|
|
|
theme="alt"
|
|
|
|
class="button"
|
|
|
|
:href="discordLink"
|
|
|
|
:text="formattedDiscord"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.button {
|
|
|
|
margin: 6px;
|
2024-06-21 22:24:54 +00:00
|
|
|
text-decoration: none;
|
2024-06-21 04:46:24 +00:00
|
|
|
}
|
2024-06-21 22:24:54 +00:00
|
|
|
.container {
|
2024-06-21 04:46:24 +00:00
|
|
|
margin: -6px;
|
|
|
|
}
|
|
|
|
</style>
|