Added Dictionary Table Component

src/components/DictionaryTable.vue

@@ -0,0 +1,84 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th>{{ keyHeader }}</th>
+        <th>{{ valueHeader }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="item in collection">
+        <tr :key="item[0]">
+          <td>{{ item[0] }}</td>
+          <td>
+            {{ item[1] }}
+            <template v-if="isHexValue(item[1])">
+              <span
+                :class="{ 'hex-color': isHexValue(item[1]) }"
+                :style="`background-color: ${isHexValue(item[1])}`"
+              ></span>
+            </template>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    keyHeader: String,
+    valueHeader: String,
+    collection: Array
+  },
+  methods: {
+    isHexValue(value) {
+      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 1em;
+    width: 50%;
+  }
+}
+
+thead {
+  tr {
+    background-color: burlywood;
+  }
+}
+
+tbody {
+  tr:nth-child(odd) {
+    background-color: #eee;
+  }
+
+  td:first-child {
+    text-align: right;
+  }
+}
+
+.hex-color {
+  display: inline-block;
+  width: 50%;
+  height: 100%;
+}
+
+@function high-contrast-text-color($color) {
+  @if (lightness($color) > 50) {
+    @return #000000;
+  } @else {
+    @return #ffffff;
+  }
+}
+</style>