feat(shared-component): adiciona emit de active tab

src/components/shared/CustomTabComponent.vue

@@ -1,19 +1,52 @@
 <template>
-  <div v-for="tab in tabs" :key="tab.name" class="row" style="height: 30px">
+  <div class="row no-wrap bg-secondary-3" style="border-radius: 8px; gap: 4px">
     <div
-      class="col-2 bg-secondary flex items-center justify-center"
-      style="border-radius: 8px"
+      v-for="tab in tabs"
+      :key="tab.name"
+      class="col flex items-center justify-center cursor-pointer tab-item"
+      :class="activeTab === tab.name ? 'tab-active' : 'tab-inactive'"
+      style="height: 36px; border-radius: 6px"
+      @click="emit('update:activeTab', tab.name)"
     >
-      <div class="text-center">{{ tab.label }}</div>
+      <span class="text-center text-weight-medium" style="font-size: 13px">
+        {{ tab.label }}
+      </span>
     </div>
   </div>
 </template>
 
 <script setup>
-const { tabs } = defineProps({
+defineProps({
   tabs: {
     type: Array,
     required: true,
   },
+  activeTab: {
+    type: String,
+    default: null,
+  },
 });
+
+const emit = defineEmits(["update:activeTab"]);
 </script>
+
+<style scoped>
+.tab-item {
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.tab-active {
+  background-color: #ff8340;
+}
+
+.tab-inactive {
+  background-color: transparent;
+  color: #555;
+}
+
+.tab-inactive:hover {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+</style>