<script setup>
import AisInputGroup from '@/components/input-group/AisInputGroup.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisDropdown from '@c/dropdown/AisDropdown.vue'
import AisMenuItem from '@c/menu/AisMenuItem.vue'
import AisField from '@c/field/AisField.vue'
import { faBuildingColumns } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'
library.add(faBuildingColumns)
</script>

<template>
  <AisField label="AisInput + AisDropdown">
    <AisInputGroup class="">
      <AisInput icon="search" placeholder="Testing..." size="md" class="flex-1" />
      <AisDropdown class="rounded-r" variant="secondary" label="Users" icon="users" font="sans" size="md" right>
        <AisMenuItem label="Users"></AisMenuItem>
        <AisMenuItem label="Groups"></AisMenuItem>
        <AisMenuItem label="World"></AisMenuItem>
      </AisDropdown>
    </AisInputGroup>
  </AisField>
</template>
