feat: add ColorTable component

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>