<template>
  <div class="flex gap-8">
    <div>
      <AisMenu label="With Divider">
        <AisMenuItem label="Menu Item 1"></AisMenuItem>
        <AisMenuItem label="Menu Item 2"></AisMenuItem>
        <AisMenuDivider/>
        <AisMenuItem label="Menu Item 3"></AisMenuItem>
      </AisMenu>
    </div>
    <div>
      <AisMenu label="With Divider Using Items Prop" :items="items"></AisMenu>
    </div>
  </div>

</template>

<script setup>
  import { ref } from "vue";
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import AisMenuDivider from "@/components/menu/AisMenuDivider.vue";

  const items = ref([
    { key: 'item1', label: 'Menu Item 1' },
    { key: 'item2', label: 'Menu Item 2' },
    { key: 'divider1', type: 'divider' },
    { key: 'item3', label: 'Menu Item 3' },
  ])
</script>

<script>
export default {
  name: "AisMenuDividerExample",
}
</script>