<script setup lang="ts">
import { buildTree } from "@/utils/recusive";
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";

const _props = defineProps<{
  content?: any[];
  component?: any;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 10,
};
</script>

<template>
  <nav>
    <div class="flex gap-3 justify-end items-center">
      <RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
    </div>
  </nav>
</template>

<style lang="scss" scoped>
.empty {
  width: 100px;
  min-height: 20px;
  border-radius: 4px;
  background: #409eff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 18px;
  color: white;
  margin: 5px 0px;
}
</style>
