From e29a98f06db20090b33ac14b0966eebe7c521f94 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 18 Jan 2023 18:35:52 +0100
Subject: [PATCH] feat: add copy action indicator to color table

---
 src/assets/icons/ClipboardIcon.vue |  3 +++
 src/components/ColorTable.vue      | 20 +++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/icons/ClipboardIcon.vue

diff --git a/src/assets/icons/ClipboardIcon.vue b/src/assets/icons/ClipboardIcon.vue
new file mode 100644
index 0000000..1089234
--- /dev/null
+++ b/src/assets/icons/ClipboardIcon.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
+</template>
diff --git a/src/components/ColorTable.vue b/src/components/ColorTable.vue
index a517693..56dbf73 100644
--- a/src/components/ColorTable.vue
+++ b/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>