feat: continued iteration of first two tabs

components/FirstTabContent.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="tab-content grid flex-col">
+    <template v-for="(process, index) in $store.state.incremental.processes">
+      <button :key="index" class="text-right font-semibold">
+        {{ process.device }}
+      </button>
+      <div :key="index" class="progress-bar relative">
+        <progress max="100" value="50" class="w-full h-full"></progress>
+        <span
+          class="absolute top-0 bottom-0 left-0 right-0 text-center text-white"
+        >
+          1.3 <span class="fas fa-hourglass-half text-sm" /> / sec
+          <!-- {{ $store.state.incremental.currency[process.produces] }} {{ process.produces }} -->
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+.tab-content {
+  grid-template-columns: auto 1fr;
+  grid-gap: 1rem 1rem;
+}
+</style>

components/SecondTabContent.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="tab-content grid flex-col">
+    <div
+      v-for="(process, index) in $store.state.incremental.processes"
+      :key="index"
+      class="flex flex-col mb-4 p-4 rounded border"
+      :class="`border-${$store.getters.activeTab.darkColor}`"
+    >
+      <span class="text-center font-bold pb-2 text-xl">
+        {{ process.workerCount }} {{ process.worker }}s
+      </span>
+      <span class="text-left font-semibold">
+        Each <b>{{ process.worker }}</b> makes your
+        <b>{{ process.device }}s</b> produce <b>{{ process.produces }}</b> at an
+        increased rate.
+      </span>
+      <span class="text-center text-md pt-2"
+        >Cost for next {{ process.worker }}: 4
+        {{ process.buyWorkersWith }}</span
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+.tab-content {
+  grid-template-columns: 1fr;
+}
+</style>