<script lang="ts" setup>
import type { SubNavItem } from '../nav/Secondary.vue'

defineProps<{ subnavs?: SubNavItem[] }>()
</script>

<template>
  <div class="flex flex-1 flex-col p-8 page-bg-gradient">
    <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
    <slot name="subnav">
      <NavSecondary
        v-if="subnavs && subnavs.length"
        :navs="subnavs"
      />
    </slot>
    <div
      class="bg-white h-full rounded-lg shadow-sm p-8 dark:bg-neutral-900 z-20"
    >
      <slot />
    </div>
  </div>
</template>

<style scoped>
.page-bg-gradient {
  @apply bg-gradient-to-br from-[#D5DEF9]/50 to-[#D6C9F9]/50;
  @apply dark:from-[#36477A]/50 dark:to-[#7C6DA6]/50;
}
</style>
