Files
BeReadyFrontend/src/app/components/friend-request/friend-request.component.html
T
2026-05-18 16:34:26 +01:00

51 lines
2.9 KiB
HTML

@if (friendsRequest().length) {
<div class="rounded-xl px-5 m-3 bg-white overflow-auto font-mono border border-gray-300">
<ion-list>
@for (request of friendsRequest(); track request.userId; let i = $index) {
@if (i == friendsRequest().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">{{ request.username }}</ion-label>
<ion-button fill="clear" (click)="acceptRequest(request)">
<ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
</ion-button>
<app-pipe></app-pipe>
<ion-button fill="clear" (click)="rejectRequest(request.userId)">
<ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></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">{{ request.username }}</ion-label>
<ion-button fill="clear" (click)="acceptRequest(request)">
<ion-icon slot="icon-only" name="check" class="text-green-600 m-0"></ion-icon>
</ion-button>
<app-pipe></app-pipe>
<ion-button fill="clear" (click)="rejectRequest(request.userId)">
<ion-icon slot="icon-only" name="close" class="text-red-600 m-0"></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-outline" 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 demandes d'amis apparaîtront ici</p>
</div>
</div>
</ion-item>
}