TabComponent.vue

<script setup>
defineEmits(['onTabSelect'])
const props = defineProps(['active', 'tabs'])
</script>

<template>
  <div class="tabs">
    <div class="tab" :class="{ tab__active: tab.value === props.active }" v-for="tab in props.tabs" :key="tab.key"
      @click="$emit('onTabSelect', tab.value)">
      <span>{{ tab.name }}</span>
    </div>
  </div>
</template>

<style scoped>
.tabs {
  overflow-x: auto;
  padding: var(--spacing);
  display: flex;
  gap: var(--spacing-s);
}

@media (min-width: 48em) {
  .tabs {
    flex-direction: row;
  }
}

.tab {
  padding: 0 var(--spacing);
  display: flex;
  border-radius: var(--radius);
  cursor: pointer;
}

.tab__active {
  background-color: hsl(var(--clr-primary));
  display: flex;
  color: var(--clr-white);
}

.tab:hover:not(.tab__active) {
  background-color: hsl(var(--clr-background));
  transition: background-color ease-in 250ms;
}
</style>