45 lines
1017 B
Vue
45 lines
1017 B
Vue
<template>
|
|
<div class="group flex mt-2">
|
|
<h3 :id="id" class="text-xl font-semibold">
|
|
<slot />
|
|
</h3>
|
|
<button @click="copy('https://juls07.dev' + route.path + '#' + id)"
|
|
class="dark:text-white ml-2 group-hover:opacity-100 opacity-0 transition-all">
|
|
<div class="h-5" v-if="copied">
|
|
<Icon size="20" name="tabler:check" />
|
|
</div>
|
|
<div class="h-5" v-else>
|
|
<Icon size="20" name="tabler:link" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
id?: string;
|
|
}>(),
|
|
{ id: '' }
|
|
);
|
|
|
|
let copied = ref(false);
|
|
const copy = (text: string) => {
|
|
if (import.meta.client) {
|
|
navigator.clipboard.writeText(text)
|
|
copied.value = true;
|
|
setTimeout(() => {
|
|
copied.value = false;
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
const route = useRoute();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon {
|
|
display: block;
|
|
}
|
|
</style>
|