<template>
  <component :is="layout" class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
    <router-view />
  </component>
</template>
<script setup lang="ts">
// <Footer />
import { computed } from 'vue'
import { useRouter } from 'vue-router'
// import AppLayout from '~/layouts/AppLayout.vue'
import { useHead } from '@vueuse/head'
// https://github.com/vueuse/head
// you can use this to manipulate the document head in any components,
// they will be rendered correctly in the html results with vite-ssg
useHead({
  title: 'Status',
  meta: [
    { name: 'description', content: 'Opinionated Vite Starter Template' },
  ],
})
const { currentRoute } = useRouter()
const appLayout = 'AppLayout'
const layout = computed(() => {
  return `${currentRoute.value.meta.layout || appLayout}`
})
</script>