1 files changed, 70 insertions, 0 deletions
diff --git a/src/views/_sila/Power/Static/SupplyTabs.vue b/src/views/_sila/Power/Static/SupplyTabs.vue
new file mode 100644
index 00000000..7a1ea20d
--- /dev/null
+++ b/src/views/_sila/Power/Static/SupplyTabs.vue
@@ -0,0 +1,70 @@
+<template>
+  <b-col
+    ref="content"
+    class="d-flex align-items-center data-tab"
+    @wheel.prevent="wheelItBetter($event)"
+  >
+    <span
+      v-for="item in slots"
+      :key="item.id"
+      :class="{ 'tab-active': currentSlot === item.id }"
+      @click="switchTab(item.id)"
+      >{{ item.id }}</span
+    >
+  </b-col>
+</template>
+
+<script>
+export default {
+  props: {
+    slots: {
+      type: Array,
+      default: null,
+    },
+    currentSlot: {
+      type: String,
+      default: null,
+    },
+    switchTab: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      container: this.$refs.content,
+    };
+  },
+  methods: {
+    wheelItBetter(event) {
+      if (event.deltaY < 0) {
+        this.$refs.content.scrollLeft -= 25;
+      } else {
+        this.$refs.content.scrollLeft += 25;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.data-tab {
+  height: 48px;
+  max-width: 150%;
+  width: auto;
+  margin: -2rem -1.95rem 0px -2rem;
+  padding-left: 2rem;
+  overflow-x: auto;
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: -0.95rem;
+  }
+  border-bottom: 1px solid $gray-10;
+  gap: 24px;
+}
+
+.tab-active {
+  color: $primary;
+  transition: ease-in 0.15s;
+}
+</style>