1 files changed, 117 insertions, 0 deletions
diff --git a/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue b/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue
new file mode 100644
index 00000000..c89c5a81
--- /dev/null
+++ b/src/components/_sila/Global/SilaComponents/TwoChiocePopover.vue
@@ -0,0 +1,117 @@
+<template>
+  <b-popover
+    :placement="placement"
+    triggers="focus"
+    :show.sync="show"
+    custom-class="popover-heigth-100"
+    :target="`popover-choice-${id}`"
+    @hidden="onHidden"
+  >
+    <b-button
+      id="popover-choice-button"
+      variant="popover"
+      :class="{ 'selected-choice-button': scale === topPosition }"
+      @mouseover="scale = topPosition"
+      @click="
+        () => {
+          show = false;
+          firstAction();
+        }
+      "
+    >
+      {{ fitstOption }}
+    </b-button>
+    <b-button
+      id="popover-choice-button"
+      variant="popover"
+      :class="{ 'selected-choice-button': scale === bottomPosition }"
+      @mouseover="scale = bottomPosition"
+      @click="
+        () => {
+          show = false;
+          secondAction();
+        }
+      "
+    >
+      {{ secondOption }}
+    </b-button>
+    <div class="slider" :style="`left: 5px; top: ${scale}px;`"></div>
+  </b-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: null,
+    },
+    fitstOption: {
+      type: String,
+      default: null,
+    },
+    secondOption: {
+      type: String,
+      default: null,
+    },
+    chosenOption: {
+      type: String,
+      default: null,
+    },
+    firstAction: {
+      type: Function,
+      default: null,
+    },
+    secondAction: {
+      type: Function,
+      default: null,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+  data() {
+    return {
+      topPosition: 5,
+      bottomPosition: 33,
+      show: false,
+      scale: 5,
+    };
+  },
+  methods: {
+    onHidden() {
+      if (this.secondOption === this.chosenOption) {
+        this.scale = this.bottomPosition;
+      } else {
+        this.scale = this.topPosition;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+#popover-unit-ractive {
+  padding-left: 5px;
+}
+
+.hovered-unit-button {
+  color: $white;
+}
+</style>
+<style lang="scss" scoped>
+#popover-choice-button {
+  width: 89px;
+}
+
+.slider {
+  width: 89px;
+  height: 28px;
+  border-radius: 8px;
+  background-color: $red-brand-primary;
+  box-shadow: 1px 2px 4px -1px rgb(79 37 37 / 40%) inset;
+  position: absolute;
+  transition: ease-in 0.2s;
+  z-index: -1;
+}
+</style>