1 files changed, 35 insertions, 0 deletions
diff --git a/src/components/SpanCopyable.vue b/src/components/SpanCopyable.vue
new file mode 100644
index 0000000..caac35d
--- /dev/null
+++ b/src/components/SpanCopyable.vue
@@ -0,0 +1,35 @@
+<template>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <span class="value" @click="handleClick">{{ value }}</span>
+    </template>
+    {{ tooltipText }}
+  </n-tooltip>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core';
+import { ref, toRefs } from 'vue';
+
+const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
+const { value } = toRefs(props);
+
+const initialText = 'Copy to clipboard';
+const tooltipText = ref(initialText);
+
+const { copy } = useClipboard({ source: value });
+
+function handleClick() {
+  copy();
+  tooltipText.value = 'Copied!';
+
+  setTimeout(() => (tooltipText.value = initialText), 1000);
+}
+</script>
+
+<style scoped lang="less">
+.value {
+  cursor: pointer;
+  font-family: monospace;
+}
+</style>