From c6a56c81040a9a715cdfaf83e70679c30c3d1f4f Mon Sep 17 00:00:00 2001
From: Taron Chatoyan <47221390+t-chatoyan@users.noreply.github.com>
Date: Tue, 19 Nov 2024 20:49:47 +0400
Subject: [PATCH] Add version, edition and similar badges. (#1961)

* Add version, edition and similar badges.

* Add version, edition and similar badges.

---------

Co-authored-by: Taron Chatoyan <chatoyan48@gmailc.com>
---
 components/content/Badge.vue | 55 ++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 components/content/Badge.vue

diff --git a/components/content/Badge.vue b/components/content/Badge.vue
new file mode 100644
index 0000000000..563350bc0e
--- /dev/null
+++ b/components/content/Badge.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="fw-bold d-flex gap-2 flex-wrap mb-3">
+        <p class="mb-0">Available on:</p>
+        <span class="badge d-flex align-items-center bg-body-tertiary">{{version}}</span>
+        <span v-bind:v-if="edition" v-for="edition in editions" class="badge d-flex align-items-center" :class="`bg-${editionInfo(edition).color}`">{{ editionInfo(edition).label }}</span>
+    </div>
+
+</template>
+
+<script>
+  export default {
+    components: {},
+    props: {
+      version: {
+        type: String,
+        default: ''
+      },
+      editions: {
+        type: Object,
+        default: []
+      }
+    },
+    data() {
+      return {
+        color: 'secondary',
+        editionLabelAndColorByPrefix: {
+          OSS: {label: "Open Source Edition", color: "primary"},
+          EE: {label: "Enterprise Edition", color: "secondary"},
+          CLOUD_TEAM: {label: "Cloud Team plan", color: "success"},
+          CLOUD_PRO: {label: "Cloud Pro plan", color: "info"},
+        }
+      }
+    },
+    mounted() {
+      console.log('All props:', this.$props);
+      console.log('All props:', this.$props.text);
+    },
+    methods: {
+      editionInfo(edition) {
+        return this.editionLabelAndColorByPrefix?.[edition] ?? {
+          label: edition,
+          color: "dark-3"
+        }
+      }
+    },
+    computed: {
+      title() {
+        if (this.type === 'editions') {
+          return this.editionLabelAndColorByPrefix.EE.label
+        }
+        return this.$props.type
+      }
+    },
+  }
+</script>