wrbapp/frontend/pages/index.vue

<template>
    <div class="flex flex-col justify-center items-center px-2 overflow-hidden">
        <h1 class="font-bold text-3xl text-center mt-6 mb-3">Reddingsbrigade Waddinxveen</h1>
    <h2 class="text-xl text-center mb-12">{{ userStore.userPersons.map(a => a.fullName).join(', ')}} {{ userStore.userPerons }}</h2>
        <div class="container w-full max-w-md">
            <NuxtLink to="/news" class="rounded-t item-hover py-2 flex items-center">
                <span>Nieuws</span>
                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
            </NuxtLink>
            <div class="divider" />
            <NuxtLink to="/calendar" class="item-hover py-2 flex items-center">
                <span>Agenda</span>
                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
            </NuxtLink>
            <div class="divider" />
            <NuxtLink to="/settings" class="rounded-b item-hover py-2 flex items-center">
                <span>Settings</span>
                <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
definePageMeta({
  title: 'Home',
})
const userStore = useUserStore()
</script>