elk/components/common/CommonTabs.vue

<script setup lang="ts">
defineProps<{
  options: string[]
}>()

const { modelValue } = defineModel<{
  modelValue: string
}>()

function toValidName(otpion: string) {
  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
}
</script>

<template>
  <div flex w-full items-center lg:text-lg>
    <template v-for="option in options" :key="option">
      <input
        :id="`tab-${toValidName(option)}`"
        :checked="modelValue === option"
        :value="option"
        type="radio"
        name="tabs"
        display="none"
        @change="modelValue = option"
      ><label
        flex flex-auto cursor-pointer p3 m1 rounded transition-all
        :for="`tab-${toValidName(option)}`"
        tabindex="1"
        hover:bg-active transition-100
        @keypress.enter="modelValue = option"
      ><span
        mxa px2 text-center
        :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
      >{{ option }}</span>
      </label>
    </template>
  </div>
</template>