initial

layers/shared/components/text-shortener.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="text-shortener">
+    <span
+      class="text-shortener__text"
+      @click="copyButton.copy()"
+    >
+      {{ shortenedText }}
+    </span>
+
+    <UiCopyButton
+      ref="copyButton"
+      :title="null"
+      :pressed-title="null"
+      :value="text"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({ text: { type: String, required: true } })
+
+const copyButton = ref()
+
+const shortenedText = computed(() => {
+  if (props.text.length > 12)
+    return `${props.text.substr(0, 5)}....${props.text.substr(-5, 5)}`
+
+  return props.text
+})
+</script>
+
+<style lang="scss">
+.text-shortener {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &__text {
+    @include txt-r-sb('text-shortener');
+
+    cursor: pointer;
+  }
+}
+</style>