65 lines
3.4 KiB
HTML
65 lines
3.4 KiB
HTML
@if (friends().length) {
|
|
<div class="rounded-xl px-5 m-3 bg-white font-mono border border-gray-300">
|
|
<ion-list>
|
|
@for (friend of friends(); track friend.friendId; let i = $index) {
|
|
@if (i == friends().length - 1) {
|
|
<ion-item lines="none">
|
|
<ion-avatar slot="start" class="w-5 h-5">
|
|
<img alt="Silhouette of a person's head"
|
|
src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
|
|
</ion-avatar>
|
|
<ion-label class="text-xs font-mono font-bold"
|
|
(click)="setOpen(true, friend.friendId)">{{ friend.username }}
|
|
</ion-label>
|
|
<ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
|
|
<ion-button fill="clear" (click)="deleteFriend(friend.friendId)">
|
|
<ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
|
|
</ion-button>
|
|
</ion-item>
|
|
} @else {
|
|
<ion-item lines="full">
|
|
<ion-avatar slot="start" class="w-5 h-5">
|
|
<img alt="Silhouette of a person's head"
|
|
src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
|
|
</ion-avatar>
|
|
<ion-label class="text-xs font-mono font-bold"
|
|
(click)="setOpen(true, friend.friendId)">{{ friend.username }}
|
|
</ion-label>
|
|
<ion-label class="text-xs font-mono text-gray-400">{{ friend.score }} <em>pts</em></ion-label>
|
|
<ion-button fill="clear" (click)="deleteFriend(friend.friendId)">
|
|
<ion-icon slot="icon-only" name="close" class="text-red-600"></ion-icon>
|
|
</ion-button>
|
|
</ion-item>
|
|
}
|
|
}
|
|
</ion-list>
|
|
</div>
|
|
} @else {
|
|
<ion-item lines="none" class="border border-stone-200 rounded-xl m-3" style="--background: #fafaf8;">
|
|
<div class="flex flex-col items-center w-full px-10 py-20 gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-stone-100 border border-stone-200 flex items-center justify-center">
|
|
<ion-icon name="people" style="color:#a8a090; font-size:20px;"></ion-icon>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="m-0 text-sm font-medium text-stone-400">Ajoutez vos amis</p>
|
|
<p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos amis apparaîtront ici</p>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
}
|
|
|
|
<ion-modal [isOpen]="isModalOpen">
|
|
<ng-template>
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Profil</ion-title>
|
|
<ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
|
|
<ion-back-button default-href="" (click)="setOpen(false, null)"></ion-back-button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content class="ion-padding" style="--background: #f7f6f2;">
|
|
<app-generic-user-info [userInfo]="selectedFriend()"></app-generic-user-info>
|
|
</ion-content>
|
|
</ng-template>
|
|
</ion-modal> |