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