feat: add copy action indicator to color table

src/components/ColorTable.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import ClipboardIcon from "@/assets/icons/ClipboardIcon.vue";
+
 interface ColorDict {
   name: string;
   value: string;
@@ -8,6 +10,10 @@ interface Props {
   colors: ColorDict[];
 }
 
+const copyToClipboard = (value: string) => {
+  navigator.clipboard.writeText(value);
+};
+
 defineProps<Props>();
 </script>
 
@@ -23,7 +29,13 @@ defineProps<Props>();
     <tbody class="color-table__body">
       <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
         <td class="color-table__cell name">{{ color.name }}</td>
-        <td class="color-table__cell value">{{ color.value }}</td>
+        <td
+          class="color-table__cell value"
+          @click.prevent="copyToClipboard(color.value)"
+        >
+          {{ color.value }}
+          <ClipboardIcon class="color-table__copy" />
+        </td>
         <td
           class="color-table__cell color"
           :style="{ 'background-color': color.value }"
@@ -49,11 +61,17 @@ defineProps<Props>();
     &.value {
       font-family: monospace;
       text-align: center;
+      cursor: pointer;
     }
 
     &.color {
       min-width: 10vw;
     }
   }
+
+  &__copy {
+    margin: 0 0 -0.25rem 0;
+    max-height: 1.25rem;
+  }
 }
 </style>