<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #1
        <AisBadge variant="info" size="sm">23</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #2
        <AisBadge variant="info" size="sm">17</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #3
        <AisBadge variant="info" size="sm">11</AisBadge>
      </div>
    </AisListGroupItem>
    <AisListGroupItem>
      <div class="flex justify-between items-center">
        List Group Item #4
        <AisBadge variant="info" size="sm">2</AisBadge>
      </div>
    </AisListGroupItem>
  </AisListGroup>
</template>

<script setup>
  import AisListGroup from "@/components/list-group/AisListGroup.vue";
  import AisListGroupItem from "@/components/list-group/AisListGroupItem.vue";
  import AisBadge from "@/components/badge/AisBadge.vue";
</script>

<script>
export default {
  name: "AisListGroupBadges"
}
</script>