1 files changed, 42 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/UserItem.svelte b/ping/frontend/src/lib/components/UserItem.svelte
new file mode 100644
index 0000000..44add60
--- /dev/null
+++ b/ping/frontend/src/lib/components/UserItem.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Avatar from './Avatar.svelte';
+	import type { IUser } from '$lib/stores/auth';
+
+	const { user, onEdit, onDelete }: { user: IUser; onEdit: any; onDelete: any } = $props();
+</script>
+
+<div class="useritem">
+	<div class="useritem-avatar">
+		<Avatar username={user.displayName} url={user.avatar || '/img/default-avatar.png'} />
+		<button class="btn" onclick={onEdit}> Modifier </button>
+		<button class="btn" onclick={onDelete}> Supprimer </button>
+	</div>
+	<div class="useritem-details">
+		<p><b>Nom</b>: {user.displayName}</p>
+		<p><b>Login</b>: {user.login}</p>
+		<p><b>Role</b>: {user.isAdmin ? 'ADMIN' : 'USER'}</p>
+		<p><b>Id</b>: {user.id}</p>
+	</div>
+</div>
+
+<style>
+	.useritem {
+		display: flex;
+		background-color: var(--bg-secondary);
+		margin: 16px 0;
+		padding: 8px;
+		border-radius: 8px;
+		gap: 8px;
+	}
+
+	.useritem-avatar,
+	.useritem-details {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.useritem-avatar {
+		align-items: center;
+	}
+</style>