refactor: ♻️ split up App.vue into separate components

src/components/DataTable.vue

@@ -1,25 +1,31 @@
 <template>
-  <table>
-    <thead>
-      <tr>
-        <template v-for="header in dataset.headers">
-          <th :key="header">{{ header }}</th>
-        </template>
+  <table class="datatable">
+    <thead class="datatable__head">
+      <tr class="datatable__row datatable__row--head">
+        <th
+          class="datatable__heading"
+          v-for="(header, idx) in dataset.headers"
+          :key="idx"
+        >
+          {{ header }}
+        </th>
       </tr>
     </thead>
-    <tbody>
-      <tr v-for="(tuple, row) in dataset.data" :key="row">
-        <template v-for="(item, col) in tuple">
-          <td :key="col" v-if="col === 1 && !isHexValue(item)" colspan="2">
-            {{ item }}
-          </td>
-          <td :key="item[0]" v-else>{{ item }}</td>
-          <td
-            v-if="isHexValue(item)"
-            :key="item[1]"
-            :style="'background-color:' + item"
-          ></td>
-        </template>
+    <tbody class="datatable__body">
+      <tr class="datatable__row" v-for="(row, idx) in dataset.data" :key="idx">
+        <td
+          class="datatable__cell"
+          v-for="(cell, idx) in row"
+          :key="idx"
+          :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
+        >
+          {{ cell }}
+        </td>
+        <td
+          v-if="isHexValue(row[1])"
+          class="datatable__cell--colorpick"
+          :style="`background-color: ${row[1]}`"
+        ></td>
       </tr>
     </tbody>
   </table>
@@ -42,39 +48,48 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-table {
+<style lang="scss">
+@import "@scss/_variables.scss";
+
+.datatable {
   border-collapse: collapse;
   width: 100%;
 
-  th,
-  td {
+  &__heading,
+  &__cell {
     padding: 0.25em 0.5em;
 
     @media (min-width: 35em) {
       padding: 0.5em 1em;
     }
   }
-}
 
-thead {
-  tr {
-    background-color: #3f4c6b;
-    color: #fff;
-  }
-}
+  &__body {
+    .datatable__row {
+      background-color: rgba($bg-color-dark, 0.7);
 
-tbody {
-  tr {
-    background-color: #fff;
+      &:nth-child(odd) {
+        background-color: rgba(lighten($bg-color-dark, 20%), 0.7);
+      }
+    }
   }
 
-  tr:nth-child(odd) {
-    background-color: #e1e1e1;
+  &__row {
+    &--head {
+      background-color: $bg-color-light;
+      color: $copy-color;
+    }
   }
 
-  td:first-child {
-    text-align: right;
+  &__cell {
+    &:first-child {
+      text-align: right;
+    }
+
+    &--colorpick {
+      margin-top: 0.1em;
+      border: 0.1em solid #fff;
+    }
   }
 }
 </style>