eb69f6c48e
This commit establishes the initial structure of the Nuxt application, centered around a new event order form. Key changes include: - Setting up the main app layout with a header, footer, and color mode support using @nuxt/ui. - Creating a multi-part event order form on the index page. - Introducing a `useEventOrder` composable to manage form state and validation with Zod. - Adding modular form components under `app/components/eventOrder`. - Including project configuration files for pnpm, VSCode, and global CSS.
60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
|
<UApp>
|
|
<UHeader>
|
|
<template #left>
|
|
<div class="text-2xl font-bold">Tootaio Studio</div>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UColorModeButton />
|
|
</template>
|
|
</UHeader>
|
|
|
|
<UMain>
|
|
<slot />
|
|
</UMain>
|
|
|
|
<UFooter>
|
|
<template #left>
|
|
<p class="text-muted text-sm">
|
|
Copyright © 2021 - {{ new Date().getFullYear() }} Tootaio Studio.
|
|
All Rights Reserved.
|
|
</p>
|
|
</template>
|
|
|
|
<template #right>
|
|
<UButton
|
|
v-for="link in socialLink"
|
|
:key="link.name"
|
|
:icon="link.icon"
|
|
color="neutral"
|
|
variant="ghost"
|
|
:to="link.link"
|
|
target="_blank"
|
|
:aria-label="link.name"
|
|
/>
|
|
</template>
|
|
</UFooter>
|
|
</UApp>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const socialLink = [
|
|
{
|
|
name: "Blog Posts",
|
|
icon: "lucide:globe",
|
|
link: "https://xiaomai.tootaio.com",
|
|
},
|
|
{
|
|
name: "Official Website",
|
|
icon: "lucide:mouse-pointer-click",
|
|
link: "https://tootaio.com",
|
|
},
|
|
{
|
|
name: "GitHub",
|
|
icon: "lucide:github",
|
|
link: "https://github.com/kingsmai",
|
|
},
|
|
];
|
|
</script>
|