frontend/src/components/CopyToClipboard.vue

<script setup>
import { useMessage } from 'naive-ui'

const message = useMessage()

const props = defineProps({
  text: {
    type: String,
    default: '',
  },
})

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>