1 files changed, 136 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/DataTabs.vue b/src/components/_sila/Global/SilaComponents/DataTabs.vue
new file mode 100644
index 00000000..49afbbfb
--- /dev/null
+++ b/src/components/_sila/Global/SilaComponents/DataTabs.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div
+      ref="content"
+      :class="'tabs-switch'"
+      :style="gridStyle"
+      @wheel.prevent="wheelItBetter($event)"
+    >
+      <span
+        v-for="item in slots"
+        :key="item.id"
+        class="medium-12px scale-item"
+        :class="{ 'tab-active': currentTab === item.id }"
+        :style="`width: ${slotWidth}px`"
+        @click="switchTab(item.id)"
+        >{{ $t(item.name) }}</span
+      >
+      <div class="slider" :style="sliderStyle" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    slots: {
+      type: Array,
+      default: null,
+    },
+    currentTab: {
+      type: Number,
+      default: 1,
+    },
+    switchTab: {
+      type: Function,
+      required: true,
+    },
+    slotWidth: {
+      type: Number,
+      default: null,
+    },
+    sliderWidth: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      upHere: false,
+      container: this.$refs.content,
+    };
+  },
+  computed: {
+    sliderStyle() {
+      return {
+        width: `${this.sliderWidth}px`,
+        left: `${
+          ((this.currentTab ? this.currentTab : 1) - 1) * this.slotWidth
+        }px`,
+      };
+    },
+    gridStyle() {
+      return {
+        gridTemplateColumns: `repeat(${this.slots.length}, ${this.slotWidth}px)`,
+      };
+    },
+  },
+  methods: {
+    wheelItBetter(event) {
+      if (event.deltaY < 0) {
+        this.$refs.content.scrollLeft -= 25;
+      } else {
+        this.$refs.content.scrollLeft += 25;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tabs-switch {
+  position: relative;
+  width: calc(95vw - 320px);
+  height: 45px;
+  margin-left: 32px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 32px;
+  align-items: end;
+  border-bottom: 1px solid $faint-secondary-primary-10;
+  overflow-x: auto;
+  white-space: nowrap;
+  &::-webkit-scrollbar {
+    height: 2px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(26, 62, 91, 0.2);
+    border-radius: 16px;
+    background-clip: content-box;
+    height: 10px;
+  }
+}
+
+.tab-active {
+  color: $red-brand-primary;
+  transition: ease-in 0.15s;
+}
+
+.slider {
+  position: absolute;
+  height: 0px;
+  border-bottom: 4px solid $red-brand-primary;
+  transition: ease-in 0.2s;
+  bottom: 0px;
+}
+
+.scale-item {
+  display: inline-block;
+  margin-right: 6px;
+  cursor: pointer;
+  &:hover {
+    transition: ease-in 0.2s;
+    color: #e11717;
+  }
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>