Added tooltip components

This commit is contained in:
2026-03-29 11:24:09 +01:00
parent 0a1e30cf69
commit 53f6667035
13 changed files with 86 additions and 13 deletions
@@ -53,7 +53,7 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" style="--background: #f7f6f2;">
<div class="rounded-xl px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
<div class="rounded-lg px-5 m-3 bg-white border border-gray-200 grid grid-cols-3 items-center">
<div>
<ion-avatar slot="start" class="w-20 h-20 p-2">
<img alt="Silhouette of a person's head"
@@ -79,33 +79,33 @@
</div>
<div class="grid grid-cols-3 px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalChallenge }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis réalisés</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalWin }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Victoires</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalPodium }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Podiums</p>
</div>
</div>
<div class="grid grid-cols-2 px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.totalBonusChallenge }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Défis bonus</p>
</div>
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.series }}×</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Séries max</p>
</div>
</div>
<div class="px-1">
<div class="rounded-xl px-4 py-0.5 m-2 bg-white border border-gray-200">
<div class="rounded-lg px-4 py-0.5 m-2 bg-white border border-gray-200">
<p class="text-2xl font-black font-mono mb-0.5">{{ selectedFriend().getUserStatsDto.score }}</p>
<p class="text-[11px] font-semibold font-mono text-gray-400 mt-0">Score global</p>
</div>