1 files changed, 35 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/input/UserSelector.svelte b/ping/frontend/src/lib/components/input/UserSelector.svelte
new file mode 100644
index 0000000..a0c80c7
--- /dev/null
+++ b/ping/frontend/src/lib/components/input/UserSelector.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { IUser } from '$lib/stores/auth';
+	import { addToast } from '$lib/stores/toast';
+	import Avatar from '../Avatar.svelte';
+
+	let { users = $bindable<IUser[]>([]) }: { users: IUser[] } = $props();
+</script>
+
+<div>
+	{#each users as u, i}
+		<Avatar
+			username={u.displayName}
+			url={u.avatar}
+			onclick={() => {
+				users = users.filter((_, index) => index !== i);
+			}}
+		/>
+	{/each}
+	<Avatar
+		username={'Ajouter un utilisateur'}
+		url={'/icons/add-green.svg'}
+		onclick={() => {
+			let userId = prompt("Entrez l'ID de l'utilisateur à ajouter :");
+			if (userId === null || userId.trim() === '') {
+				addToast({ title: 'ID utilisateur invalide.' });
+				return;
+			}
+			if (users.map((u) => u.displayName).includes(userId)) {
+				addToast({ title: 'Cet utilisateur est déjà ajouté.' });
+				return;
+			}
+			users = [...users, { displayName: userId, avatar: '/img/default-avatar.png' } as IUser];
+		}}
+	/>
+</div>