init

app/components/Buttons.vue

@@ -0,0 +1,13 @@
+<template>
+  <div className="flex gap-4 items-center flex-col sm:flex-row">
+    <a className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground gap-2 text-white hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+      href="https://bknd.io/" target="_blank" rel="noopener noreferrer">
+      <img className="grayscale" src="/bknd.ico" alt="bknd logomark" width={20} height={20} />
+      Go To Bknd.io
+    </a>
+    <a className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+      href="https://docs.bknd.io/integration/nextjs" target="_blank" rel="noopener noreferrer">
+      Read our docs
+    </a>
+  </div>
+</template>

app/components/Footer.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const pathname = computed(() => route.path)
+</script>
+
+<template>
+  <footer class="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+    <NuxtLink class="flex items-center gap-2 hover:underline hover:underline-offset-4"
+      :to="pathname === '/' ? '/user' : '/'">
+      <img aria-hidden src="/file.svg" alt="File icon" width="16" height="16" />
+      {{ pathname === '/' ? 'User' : 'Home' }}
+    </NuxtLink>
+
+    <!-- a tag is required to hit the middleware in place  -->
+    <a class="flex items-center gap-2 hover:underline hover:underline-offset-4" href="/admin">
+      <img aria-hidden src="/window.svg" alt="Window icon" width="16" height="16" />
+      Admin
+    </a>
+
+    <a class="flex items-center gap-2 hover:underline hover:underline-offset-4" href="https://bknd.io" target="_blank"
+      rel="noopener noreferrer">
+      <img aria-hidden src="/globe.svg" alt="Globe icon" width="16" height="16" />
+      Go to bknd.io →
+    </a>
+  </footer>
+</template>

app/components/List.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ items?: any[] }>(), { items: () => [] })
+
+function isPrimitive(val: unknown): boolean {
+  const t = typeof val
+  return t === 'string' || t === 'number' || t === 'boolean'
+}
+</script>
+
+<template>
+  <ol class="list-inside list-decimal text-sm text-center sm:text-left w-full text-center">
+    <li
+      v-for="(item, i) in props.items"
+      :key="i"
+      :class="{ 'mb-2': i < props.items.length - 1 }"
+    >
+      <span v-if="isPrimitive(item)">{{ item }}</span>
+      <component v-else :is="item" />
+    </li>
+  </ol>
+</template>