ref med card tabs

src/pages/newMedicalCard/components/MedicalCardTabs.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+.flex.justify-between.bg-white
+  .flex
+    .text {{ headerMenuItem }}
+    .menu-item.px-6.py-10px.cursor-pointer.text-base.whitespace-nowrap(
+      v-for="item in menuItem",
+      @click="selectItem(item)",
+      :class="{'menu-item-active': item.component === modelValue}",
+      :key="item.id",
+      :id="item.id"
+    ) {{item.title}}
+</template>
+
+<script>
+import { headerMenuItem } from "@/pages/newMedicalCard/utils/medicalConfig.js";
+import { v_model } from "@/shared/mixins/v-model";
+export default {
+  name: "MedicalCardTabs",
+  mixins: [v_model],
+  data() {
+    return {
+      menuItem: headerMenuItem,
+    };
+  },
+  methods: {
+    selectItem(item) {
+      this.value = item?.component;
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.menu-item
+  color: var(--font-grey-color)
+  border-bottom: 1px solid transparent
+.menu-item:first-child
+  border-bottom-left-radius: 4px
+.menu-item-active
+  color: var(--font-dark-blue-color)
+  border-bottom: 1px solid var(--font-dark-blue-color)
+</style>