https://betterstack.com/assets/components/docs/CodeTab-a65a976e.js

1import { useDocsStore } from 'components/stores/index'
2
3export default {
4  name: 'CodeTab',
5  props: ['activeByDefault', 'tabGroupId', 'tabId', 'originalTemplate'],
6  setup() {
7    const store = useDocsStore()
8    return { store }
9  },
10  computed: {
11    activeTabId() {
12      return this.store.activeTabsStore[this.tabGroupId]
13    },
14    dynamicClasses() {
15      return this.activeTabId === this.tabId
16        ? 'border-deprecated-secondary-royal-purple text-primary'
17        : 'border-transparent text-neutral-300 text-secondary hover:text-primary'
18    },
19  },
20  mounted() {
21    if (this.activeByDefault) {
22      this.activate()
23    }
24  },
25  methods: {
26    activate() {
27      this.store.activeTabsStore[this.tabGroupId] = this.tabId
28    },
29  },
30  template: `
31    <div
32      v-if="originalTemplate"
33      v-html="originalTemplate"
34      @click="activate"
35      class="inline-block cursor-pointer pt-2 pb-[calc(.5rem-2px)] px-1 -my-2 -mx-1 border-b-2"
36      :class="dynamicClasses" />
37    `
38}