<template>
  <div class="flex gap-8">
    <div>
      <AisMenu :items="items"
               label="Using a Core Icon"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               icon="group"
      ></AisMenu>
    </div>
    <div>
      <AisMenu :items="items"
               label="Using a FontAwesome object"
               button-class="px-3 py-2 gap-2 border border-blue-500 rounded"
               :icon="faApple"
      ></AisMenu>
    </div>
  </div>
</template>

<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import { items } from "@/components/menu/examples/example-items.js"
  import { faApple } from "@fortawesome/free-brands-svg-icons";
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add(faApple)
</script>

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