List group

<script lang="ts">
  import { Listgroup } from 'svelte-5-ui-lib';
  let simpleList = ["Profile", "Settings", "Messages", "Download"];
</script>

<div class="flex justify-center">
  <Listgroup items={simpleList} class="w-48" />
</div>

<script lang="ts">
  import { Listgroup, type ListGroupItemType } from 'svelte-5-ui-lib';
  let links: ListGroupItemType[] = [
    { name: "Avatar", href: "/components/avatar" },
    { name: "List group", href: "/components/list-group", current: true },
    { name: "Banner", href: "/components/banner" },
    { name: "Breadcrumbs", href: "/components/breadcrumb", target: "_blank" }
  ];
</script>

<div class="flex justify-center">
  <Listgroup active items={links} class="w-48" />
</div>

<script lang="ts">
  import { Listgroup } from 'svelte-5-ui-lib';
  let buttons = [
    { name: "Profile", mycustomfield: "data1", current: true },
    { name: "Settings", mycustomfield: "data2" },
    { name: "Messages", mycustomfield: "data3" },
    {
      name: "Download",
      mycustomfield: "data4",
      disabled: true,
      attrs: { type: "submit" }
    }
  ];

  const handleClick = (e?: MouseEvent) => {
    if (e?.target instanceof HTMLElement) {
      alert("mycustomfield: " + e.target.attributes.getNamedItem("mycustomfield")?.value);
    } else {
      console.warn("Unexpected event target type. Cannot access attributes.");
    }
  };
</script>

<div class="flex justify-center">
  <Listgroup active items={buttons} class="w-48" onclick={handleClick} />
</div>

<script lang="ts">
  import { Listgroup, type ListGroupItemType } from 'svelte-5-ui-lib';
  import { AdjustmentsHorizontalFlowbite, DownloadFlowbite, MessagesFlowbite, UserCircleFlowbite } from "svelte-animated-icons";
  let iconList: ListGroupItemType[] = [
    { name: "Profile", Icon: UserCircleFlowbite, mycustomfield: "data1" },
    {
      name: "Settings",
      Icon: AdjustmentsHorizontalFlowbite,
      mycustomfield: "data2"
    },
    { name: "Messages", Icon: MessagesFlowbite, mycustomfield: "data3" },
    { name: "Download", Icon: DownloadFlowbite, mycustomfield: "data4" }
  ];

  const handleClick = (e?: MouseEvent) => {
    if (e?.target instanceof HTMLElement) {
      console.log(e.target.attributes.getNamedItem("mycustomfield")?.value);
    } else {
      console.warn("Unexpected event target type. Cannot access attributes.");
    }
  };
</script>

<div class="flex justify-center">
  <Listgroup active items={iconList} iconClass="pr-1.5" class="w-48" onclick={handleClick} />
</div>

<script lang="ts">
  import { Listgroup, ListgroupItem, Avatar } from 'svelte-5-ui-lib';
  import { TrashBinSolid } from "flowbite-svelte-icons";
</script>

<div class="flex justify-center">
  <Listgroup active class="w-48">
    <h3 class="p-1 text-center text-xl font-medium text-gray-900 dark:text-white">User list</h3>
    <ListgroupItem class="flex gap-2 text-base font-semibold">
      <Avatar src="/images/profile-picture-1.webp" size="xs" />Jese Leos
    </ListgroupItem>
    <ListgroupItem class="gap-2 text-base font-semibold">
      <Avatar src="/images/profile-picture-2.webp" size="xs" />Robert Gouth
    </ListgroupItem>
    <ListgroupItem class="gap-2 text-base font-semibold">
      <Avatar src="/images/profile-picture-3.webp" size="xs" />Bonnie Green
    </ListgroupItem>
    <a href="/" class="flex items-center rounded-b-lg bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600">
      <TrashBinSolid class="me-2 ms-1 h-6 w-6" />
      Delete user
    </a>
  </Listgroup>
</div>