<template>
  <div class="grid grid-cols-2 gap-20">
    <div class="flex flex-col gap-1">
      <div class="font-bold text-base text-center">Using Default Slot</div>
      <AisListGroup>
        <AisListGroupItem>List Group Item #1</AisListGroupItem>
        <AisListGroupItem>List Group Item #2</AisListGroupItem>
        <AisListGroupItem>List Group Item #3</AisListGroupItem>
        <AisListGroupItem>List Group Item #4</AisListGroupItem>
      </AisListGroup>
    </div>

    <div class="flex flex-col gap-1">
      <div class="font-bold text-base text-center">Using 'Items' Prop</div>
      <AisListGroup :items="items"></AisListGroup>
    </div>
  </div>
</template>

<script setup>

  import AisListGroup from "@/components/list-group/AisListGroup.vue";
  import AisListGroupItem from "@/components/list-group/AisListGroupItem.vue";
  import {ref} from "vue";

  const items = ref([
      'List Group Item #1',
      'List Group Item #2',
      'List Group Item #3',
      'List Group Item #4',
  ])
</script>

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