Tabs

src/ui/Tabs.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <div class="tab-container">
+      <div
+        class="tab"
+        v-for="(tab, index) in tabs"
+        :key="index"
+        @click="changeTab(index)"
+        :class="chosenTab == index ? 'active' : null"
+      >
+        {{ tab.name }}
+      </div>
+    </div>
+    <div class="tab-elements">
+      <component
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :is="tab.component"
+        :class="chosenTab == index ? null : 'hide'"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tabs: {
+      type: Array
+    },
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  beforeMount() {
+    this.chosenTab = this.active;
+  },
+  data() {
+    return {
+      chosenTab: 0
+    };
+  },
+  methods: {
+    changeTab: function(num) {
+      this.chosenTab = num;
+      this.$emit("tabChange", num);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+}
+.hide {
+  display: none;
+}
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 25px;
+  border-bottom: 1px solid #333333;
+}
+
+.tab {
+  cursor: pointer;
+  font-size: 1.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  margin: 0 15px;
+  border: 1px solid #333333;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: #00000008;
+  border-bottom: 1px solid #333333;
+  margin-bottom: -1px;
+
+  &.active {
+    border-bottom: 1px solid white;
+    background: white;
+  }
+}
+</style>

src/ui/Wine.vue

@@ -43,6 +43,7 @@ export default {
       return this.inlineSlot && window.innerWidth > 768
     },
     hostname(url) {
+      console.log(url);
       const urlHostname = new URL(url).hostname
       return urlHostname.split(".")[(urlHostname.match(/\./g) || []).length - 1]
     }