50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<div class="w-full h-full flex p-3">
|
|
<img src="/chad-bg.webp" alt="Background" draggable="false" class="pointer-events-none absolute opacity-3 -z-1 block inset-0 object-contain w-full h-full">
|
|
|
|
<div v-auto-animate class="w-1/2 m-auto">
|
|
<div class="text-center">
|
|
<PrimeSelectButton :model-value="tab" class="mb-6" :options="options" option-label="label" :allow-empty="false" @update:model-value="onTabChanged" />
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<PrimeBadge class="fixed top-3 right-3 opacity-50" severity="secondary" :value="version" size="small" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteLocationRaw } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { version } = useApp()
|
|
|
|
interface Tab {
|
|
label: string
|
|
route: RouteLocationRaw
|
|
}
|
|
|
|
const options = computed(() => {
|
|
return [
|
|
{
|
|
label: 'Login',
|
|
route: { name: 'Login' },
|
|
},
|
|
{
|
|
label: 'Register',
|
|
route: { name: 'Register' },
|
|
},
|
|
] as Tab[]
|
|
})
|
|
|
|
const tab = computed(() => {
|
|
return options.value.find(option => route.name === router.resolve(option.route)?.name)
|
|
})
|
|
|
|
function onTabChanged(tab: Tab) {
|
|
navigateTo(tab.route)
|
|
}
|
|
</script>
|