diff --git a/src/components/CopyToClipboard.vue b/src/components/CopyToClipboard.vue
new file mode 100644
index 0000000..0100e5f
--- /dev/null
+++ b/src/components/CopyToClipboard.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+
+const message = useMessage()
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+})
+
+const copyToClipboard = async () => {
+  if (!props.text || props.text.trim() === '') {
+    message.error('Nothing to copy to clipboard')
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(props.text)
+    copySuccess()
+  } catch (err) {
+    console.error('Error copy to clipboard', err)
+    copyError()
+  }
+}
+
+function copySuccess() {
+  const displayText = props.text.length > 50
+    ? props.text.substring(0, 50) + '...'
+    : props.text
+  message.success(`Copied to clipboard: ${displayText}`)
+}
+
+function copyError() {
+  message.error('Nothing to copy to clipboard')
+}
+
+
+</script>
+
+<template>
+  <span @click="copyToClipboard">
+    <slot />
+  </span>
+</template>
+
+<style scoped></style>