2 files changed, 20 insertions, 0 deletions
diff --git a/src/ui/c-text-copyable/c-text-copyable.demo.vue b/src/ui/c-text-copyable/c-text-copyable.demo.vue
new file mode 100644
index 0000000..e2aeb1d
--- /dev/null
+++ b/src/ui/c-text-copyable/c-text-copyable.demo.vue
@@ -0,0 +1,3 @@
+<template>
+  <c-text-copyable value="value" displayed-value="displayedValue" />
+</template>
diff --git a/src/ui/c-text-copyable/c-text-copyable.vue b/src/ui/c-text-copyable/c-text-copyable.vue
new file mode 100644
index 0000000..b78e4cd
--- /dev/null
+++ b/src/ui/c-text-copyable/c-text-copyable.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+
+const props = withDefaults(defineProps<{ value?: string; displayedValue?: string; showIcon?: boolean }>(), { value: '', displayedValue: undefined, showIcon: true });
+const { value, displayedValue, showIcon } = toRefs(props);
+
+const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
+</script>
+
+<template>
+  <c-tooltip :tooltip="isJustCopied ? 'Copied!' : 'Copy to clipboard'" cursor-pointer @click="copy">
+    <span flex items-center gap-2>
+      {{ displayedValue ?? value }}
+      <icon-mdi-content-copy v-if="showIcon" op-40 />
+    </span>
+  </c-tooltip>
+</template>