feat: introduce layouts (#28)

layouts/404.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <main p="x4 y10" text="center teal-700 dark:gray-200">
+    <div text-4xl>
+      <div i-carbon-warning inline-block />
+    </div>
+    <slot />
+    <div>
+      <button btn text-sm m="3 t8" @click="router.back()">
+        Back
+      </button>
+    </div>
+    <Footer />
+  </main>
+</template>

layouts/README.md

@@ -0,0 +1,13 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+```html
+<script setup lang="ts">
+definePageMeta({
+  layout: 'home',
+})
+</script>
+```

layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Default Layout]
+    </div>
+  </main>
+</template>

layouts/home.vue

@@ -0,0 +1,9 @@
+<template>
+  <main class="py-20 px-10 text-center">
+    <slot />
+    <Footer />
+    <div class="mt-5 mx-auto text-center opacity-25 text-sm">
+      [Home Layout]
+    </div>
+  </main>
+</template>