<script setup>
  import NavBtn from "./navBtnItem.vue";
  defineProps({
    listData:[]
  }) 
</script>

<template>
  <ul class="navbtn">
    <li class="navbtn-item" v-for="list in listData">
      <NavBtn :href="list.href" :title="list.title" :desc="list.desc"/>
    </li>
  </ul>
</template>

<style scoped>
.navbtn {
  width: 100%;
  margin-left: -20px !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 8px;
  
}
.navbtn-item {
  margin: 0 !important;
  list-style: none inside;
  border: 1px solid var(--vp-c-default-1);
}
</style>