blob: 44add606b79dc4a3c1f691d4a75cb4773a1f3bae (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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>
|
