<!-- layouts/default.vue -->
<template>
    <CLayoutDashboard logo="/logo.png" name="UI Development" :links="links" :is-logged-in="false">
        <slot />
    </CLayoutDashboard>
</template>

<script setup lang="ts">
const links = [
  [
    {
      label: 'Dashboard',
      icon: 'i-heroicons-home',
      to: '/layouts'
    },
    {
      label: 'Teams',
      icon: 'i-heroicons-users',
      to: '/'
    },
    {
      label: 'Projects',
      icon: 'i-heroicons-folder',
      to: '/'
    },
    //...
  ]
]
</script>

<!-- layouts/minimal.vue -->
<template>
    <CLayoutMinimal logo="logo.png" name="UI Development" :is-logged-in="false" :has-menu="false">
        <slot />
    </CLayoutMinimal>
</template>

<!-- pages/portal.vue -->
<template>
    <CWrapper>
        Hello World
    </CWrapper>
</template>

<script setup lang="ts">
definePageMeta({
    layout: 'minimal'
})
</script>

<!-- layouts/centered.vue -->
<template>
    <CLayoutCentered>
        <slot />
    </CLayoutCentered>
</template>

<!-- pages/login.vue -->
<template>
    Hello World
</template>

<script setup lang="ts">
definePageMeta({
    layout: 'centered'
})
</script>