<template>
  <AisListGroup class="max-w-[400px]">
    <AisListGroupItem to="/item/1">List Group Item #1</AisListGroupItem>
    <AisListGroupItem href="/item/2" active>List Group Item #2</AisListGroupItem>
    <AisListGroupItem to="/item/3" disabled>List Group Item #3</AisListGroupItem>
    <AisListGroupItem action @click="handleClick">List Group Item #4</AisListGroupItem>
  </AisListGroup>
</template>

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

  const handleClick = (e) => { console.log(`4.click...`) }
</script>

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