From 5389d0aa5cb7f877a987a25c67800423f1a9dc79 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 26 Sep 2022 17:26:26 +0200
Subject: [PATCH] feat: add ColorTable component

---
 src/components/ColorTable.vue | 101 ++++++++++++++++++++++++++++++++++
 1 file changed, 101 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..983c5c6
--- /dev/null
+++ b/src/components/ColorTable.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+interface ColorDict {
+  name: string;
+  value: string;
+}
+
+interface Props {
+  colors: Array<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 {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: var(--container-width-tables);
+  margin: 2rem auto;
+  padding: var(--color-table-spacing);
+
+  &__heading,
+  &__cell {
+    padding: 0.5rem 1rem;
+  }
+
+  &__heading {
+    font-weight: bold;
+    background-color: var(--color-table-heading-background);
+    color: var(--color-table-heading-text-color);
+
+    &:first-child {
+      border-radius: var(--color-table-border-radius) 0 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 var(--color-table-border-radius) 0 0;
+    }
+
+    &.name {
+      text-align: right;
+    }
+  }
+
+  &__cell {
+    background-color: var(--color-table-cell-background);
+    color: var(--color-table-cell-text-color);
+
+    &.name {
+      text-align: right;
+    }
+
+    &.value {
+      font-family: monospace;
+      text-align: center;
+    }
+
+    &.color {
+      min-width: var(--color-table-color-cell-width);
+    }
+  }
+
+  &__row:hover &__cell {
+    background-color: var(--color-table-row-hover);
+    color: var(--color-table-cell-text-color-hover);
+  }
+
+  &__row:last-child &__cell {
+    &:first-child {
+      border-radius: 0 0 0 var(--color-table-border-radius);
+    }
+
+    &:last-child {
+      border-radius: 0 0 var(--color-table-border-radius) 0;
+    }
+  }
+}
+</style>