AvatarGroup

<script lang="ts">
	import AvatarGroup from '@tcpsystems/ui/foundation/AvatarGroup';
</script>

<AvatarGroup items={[
	{ name: 'Maya Chen' },
	{ name: 'Leon Fischer' },
	{ name: 'Priya Shah' }
]} />

<script lang="ts">
	import AvatarGroup from '@tcpsystems/ui/foundation/AvatarGroup';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Button from '@tcpsystems/ui/foundation/Button';

	const items = [{ name: 'Maya Chen' }, { name: 'Leon Fischer' }, { name: 'Priya Shah' }, { name: 'Sam Rivera' }, { name: 'Nora Ali' }];
	let expanded = $state(false);
</script>

<Stack>
	<AvatarGroup {items} max={expanded ? items.length : 2} />
	<Button size="sm" aria-expanded={expanded} onclick={() => expanded = !expanded}>{expanded ? 'Show fewer reviewers' : 'Show all reviewers'}</Button>
</Stack>

<script lang="ts">
	import AvatarGroup from '@tcpsystems/ui/foundation/AvatarGroup';
	import Stack from '@tcpsystems/ui/foundation/Stack';

	const items = [{ name: 'Maya Chen' }, { name: 'Leon Fischer' }];
</script>

<Stack>
	<AvatarGroup {items} size="sm" />
	<AvatarGroup {items} />
	<AvatarGroup {items} size="lg" />
</Stack>