List Group

	<script>
  import { Listgroup } from "flowbite-svelte";
  let simpleList = ["Profile", "Settings", "Messages", "Download"];
</script>

<Listgroup items={simpleList} class="w-48" />

	<script>
  import { Listgroup } from "flowbite-svelte";
  let links = [
    { name: "Accordions", href: "/docs/components/accordion", current: true },
    { name: "Alerts", href: "/docs/components/alert" },
    { name: "Badges", href: "/docs/components/badge" },
    { name: "Breadcrumbs", href: "/docs/components/breadcrumb", attrs: { target: "_blank" } }
  ];
</script>

<Listgroup active items={links} class="w-48" />

	<script>
  import { Listgroup } from "flowbite-svelte";
  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" } }
  ];
</script>

<Listgroup active items={buttons} class="w-48" onclick={(e) => alert(Object.entries(e?.detail ?? {}))} />

	<script>
  import { Listgroup } from "flowbite-svelte";
  import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from "flowbite-svelte-icons";
  let icons = [
    { name: "Profile", Icon: UserCircleSolid },
    { name: "Settings", Icon: AdjustmentsHorizontalSolid },
    { name: "Messages", Icon: MessagesSolid },
    { name: "Download", Icon: DownloadSolid }
  ];
</script>

<Listgroup active items={icons} class="w-48" onclick={console.log} />

	<script>
  import { Listgroup } from "flowbite-svelte";
  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" } }
  ];
</script>

<Listgroup active items={buttons} horizontal onclick={(e) => alert(Object.entries(e?.detail ?? {}))}></Listgroup>

	<script lang="ts">
  import { Listgroup, ListgroupItem, Tooltip } from "flowbite-svelte";
  import { BellOutline, ClockOutline, TrashBinOutline } from "flowbite-svelte-icons";
</script>

<Listgroup horizontal active>
  <ListgroupItem>
    <BellOutline />
  </ListgroupItem>
  <Tooltip>Tooltip bell</Tooltip>
  <ListgroupItem>
    <ClockOutline />
  </ListgroupItem>
  <Tooltip>Tooltip clock</Tooltip>
  <ListgroupItem id="trash">
    <TrashBinOutline />
  </ListgroupItem>
</Listgroup>
<Tooltip triggeredBy="#trash">Tooltip trash</Tooltip>

<Listgroup horizontal active>
  <ListgroupItem id="profile">Profile</ListgroupItem>
  <ListgroupItem id="settings">Settings</ListgroupItem>
  <ListgroupItem id="message">Messages</ListgroupItem>
</Listgroup>
<Tooltip triggeredBy="#profile">Tooltip profile</Tooltip>
<Tooltip triggeredBy="#settings">Tooltip settings</Tooltip>
<Tooltip triggeredBy="#message">Tooltip messages</Tooltip>

	<script>
  import { Listgroup, ListgroupItem, Avatar } from "flowbite-svelte";
  import { TrashBinSolid } from "flowbite-svelte-icons";
</script>

<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="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="ms-1 me-2 h-6 w-6" />
    Delete user
  </a>
</Listgroup>