From af4427cf3de3cc6e6940808770dcdb4346349ad8 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:35:51 +0100
Subject: [PATCH] feat: add ColorTable component

---
 src/components/ColorTable.vue | 56 +++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/ColorTable.vue

diff --git a/src/components/ColorTable.vue b/src/components/ColorTable.vue
new file mode 100644
index 0000000..19ce8d8
--- /dev/null
+++ b/src/components/ColorTable.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { ColorDict } from "@/interfaces";
+
+interface Props {
+  colors: ColorDict[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <table class="color-table">
+    <thead class="color-table__head">
+      <tr class="color-table__row">
+        <th class="color-table__heading name">Body part</th>
+        <th class="color-table__heading value">Value</th>
+        <th class="color-table__heading color">Color</th>
+      </tr>
+    </thead>
+    <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 color"
+          :style="{ 'background-color': color.value }"
+        ></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+.color-table {
+  &__heading {
+    &.name {
+      text-align: right;
+    }
+  }
+
+  &__cell {
+    &.name {
+      text-align: right;
+    }
+
+    &.value {
+      font-family: monospace;
+      text-align: center;
+    }
+
+    &.color {
+      min-width: 10vw;
+    }
+  }
+}
+</style>