<script setup lang="ts">
import { Outline } from '@/components/ui/outline';
import { SidebarTrigger } from '@/components/ui/sidebar';
import Frame from '@/components/ui/frame/Frame.vue';
</script>

<template>
    <div class="flex-1">
        <NuxtLayout name="default">
            <template #header>
                <Outline side="bottom" padding="dense" class="w-full">
                    <div class="flex gap-8 w-full items-center">
                        <SidebarTrigger :size="5" />
                        <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
                            Settings
                        </h2>
                    </div>
                </Outline>
            </template>
            <div class="w-full">
                <Frame>
                    Hello
                </Frame>
            </div>
        </NuxtLayout>
    </div>
</template>
