dev: hotfix, moved encounter to pub/component

app/components/pub/my-ui/comp-tab/comp-tab.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type TabItem } from './type'
+
+const props = defineProps<{
+  initialActiveTab: string
+  data: TabItem[]
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in data"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="data.find((t) => t.value === activeTab)?.component"
+      :is="data.find((t) => t.value === activeTab)?.component"
+      :label="data.find((t) => t.value === activeTab)?.label"
+      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>

app/components/pub/my-ui/comp-tab/type.ts

@@ -0,0 +1,6 @@
+export interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}