SEECBC/FrontEnd/components/learning/ChapterHeader.vue

<template>
  <v-tabs centered>
    <v-tab :to="`${pathPrefix}/tutorial`" nuxt>
      {{ $t('learning.header.tutorial') }}
    </v-tab>
    <v-tab :to="`${pathPrefix}/exercise`" nuxt>
      {{ $t('learning.header.exercise') }}
    </v-tab>
    <v-tab :to="`${pathPrefix}/playground`" nuxt>
      {{ $t('learning.header.playground') }}
    </v-tab>
  </v-tabs>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {
    playground: {
      type: String,
      default: ''
    }
  },
  computed: {
    pathPrefix(): string {
      return `/learning/${this.$route.params.chapter}/${this.$route.params.level}`
    }
  }
})
</script>

<style scoped>
.v-tabs {
  background-color: #909090;
}
</style>