51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex">
|
|
<div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
|
|
<button
|
|
class="flex-1 h-12 items-center text-center group px-3 font-heading"
|
|
:class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200'"
|
|
@click="currentPage = index">
|
|
{{ $t(option.titleKey) }}
|
|
</button>
|
|
<div
|
|
class="group-hover:h-full"
|
|
:class="index===currentPage || index+1===currentPage ? 'h-full' : 'h-7'">
|
|
<Separator orientation="vertical" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grow overflow-y-auto">
|
|
<component :is="configPageOptions[currentPage].component" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
|
|
import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
|
|
import MappingConfig from '@/components/config/pages/MappingConfig.vue'
|
|
import HapticConfig from '@/components/config/pages/HapticConfig.vue'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { ref } from 'vue'
|
|
|
|
const currentPage = ref(0)
|
|
|
|
const configPageOptions = [
|
|
{
|
|
titleKey: 'config_options.profile_settings.title',
|
|
component: ProfileConfig,
|
|
},
|
|
{
|
|
titleKey: 'config_options.feedback_designer.title',
|
|
component: HapticConfig,
|
|
},
|
|
{
|
|
titleKey: 'config_options.mapping_configuration.title',
|
|
component: MappingConfig,
|
|
},
|
|
{
|
|
titleKey: 'config_options.light_designer.title',
|
|
component: LEDsConfig,
|
|
},
|
|
]
|
|
</script> |