Avatar Circles

1<script lang="ts">
2	import { cn } from "$UTILS$.js";
3 
4	interface Avatar {
5		imageUrl: string;
6		profileUrl: string;
7	}
8 
9	interface Props {
10		class?: string;
11		numPeople?: number;
12		avatarUrls: Avatar[];
13	}
14 
15	let { class: className, numPeople, avatarUrls }: Props = $props();
16</script>
17 
18<div class={cn("z-10 flex -space-x-4 rtl:space-x-reverse", className)}>
19	{#each avatarUrls as url, index}
20		<a href={url.profileUrl} target="_blank" rel="noopener noreferrer">
21			<img
22				class="h-10 w-10 rounded-full border-2 dark:border-gray-800"
23				src={url.imageUrl}
24				width="40"
25				height="40"
26				alt="Avatar {index + 1}"
27			/>
28		</a>
29	{/each}
30	{#if (numPeople ?? 0) > 0}
31		<a
32			class="flex h-10 w-10 items-center justify-center rounded-full border-2 bg-black text-center text-xs font-medium text-white hover:bg-gray-600 dark:border-gray-800 dark:bg-white dark:text-black"
33			href="/"
34		>
35			+{numPeople}
36		</a>
37	{/if}
38</div>