mitchell/mjfs-us
1
0
Fork 0
mirror of https://github.com/mitchell/mjfs-us.git synced 2025-12-14 18:37:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Move contact buttons to a component and refactor dev tooling

Browse source
This commit is contained in:
mitchell 2024-06-21 00:46:24 -04:00
parent e3e51fb498
commit ee0b48af25
6 changed files with 85 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

65
components/ContactButtons.vue Normal file
View file

@ -0,0 +1,65 @@
<script setup lang="ts">
import { VPButton } from "vitepress/theme";
import { useClipboard } from "@vueuse/core";
const email = "m@mjfs.us";
const phone = "+19498727279";
const discord = "zettam";
const formattedPhone = "+1 (949) 872 7279";
const formattedDiscord = "zettam on Discord";
const discordLink = "https://discord.com/users/145338365133193226/";
const { text, copy, isSupported } = useClipboard();
</script>
<template>
<div v-if="isSupported" class="button-container">
<VPButton
theme="brand"
class="button"
:text="text === email ? `Copied ${email}` : email"
@click="copy(email)"
/>
<VPButton
theme="alt"
class="button"
:text="text === phone ? `Copied ${phone}` : formattedPhone"
@click="copy(phone)"
/>
<VPButton
theme="alt"
class="button"
:text="text === discord ? `Copied ${discord}` : formattedDiscord"
@click="copy(discord)"
/>
</div>
<div v-else class="button-container">
<VPButton
theme="brand"
class="button"
:href="`mailto:${email}`"
:text="email"
/>
<VPButton
theme="alt"
class="button"
:href="`tel:${phone}`"
:text="formattedPhone"
/>
<VPButton
theme="alt"
class="button"
:href="discordLink"
:text="formattedDiscord"
/>
</div>
</template>
<style scoped>
.button {
margin: 6px;
}
.button-container {
margin: -6px;
}
</style>