29 lines
1.6 KiB
HTML
29 lines
1.6 KiB
HTML
<div class="rounded-lg m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll">
|
|
@if (userChallenges().length > 0) {
|
|
@for (challenge of userChallenges(); track challenge.challengeTitle) {
|
|
<ion-item lines="none" class="border border-gray-300 rounded-xl m-2">
|
|
<div class="grid grid-cols-[1fr_auto] gap-2 items-start w-full px-3 py-2">
|
|
<div>
|
|
<p class="m-0 text-sm text-gray-500">{{ challenge.challengeTitle }}</p>
|
|
<p class="m-0 mt-1 text-xs text-gray-500">{{ challenge.challengeDescription }}</p>
|
|
</div>
|
|
<div class="text-right shrink-0">
|
|
<p class="m-0 mt-1 text-xs text-gray-400">{{ challenge.challengeStartDate }}</p>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
}
|
|
} @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-5 py-8 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="trophy" style="color:#a8a090; font-size:20px;"></ion-icon>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="m-0 text-sm font-medium text-stone-400">Aucun défi réalisé</p>
|
|
<p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos premiers défis apparaîtront ici</p>
|
|
</div>
|
|
</div>
|
|
</ion-item>
|
|
}
|
|
</div> |