Added achievements in profil page

2026-04-15 12:18:00 +01:00
parent ce5cc5880b
commit d9af61889a
8 changed files with 123 additions and 5 deletions
@@ -0,0 +1,31 @@
+<div class="rounded-lg m-3 bg-white border border-gray-200 items-center h-full max-h-48 overflow-scroll">
+    @if (achievements().length > 0) {
+        @for (achievement of achievements(); track achievement.id) {
+            <ion-item lines="none" class="border border-gray-300 rounded-xl m-2"
+                      style="--inner-padding-end: 0; --padding-start: 0; --background: #F0FAF3;">
+                <div class="flex items-center gap-4 px-3 py-1">
+                    <div class="flex items-center justify-center">
+                        <ion-icon class="text-[18px] text-green-700" name="check"></ion-icon>
+                    </div>
+                    <div>
+                        <p class="m-0 text-sm font-medium" style="color:#2d4a35;">{{ achievement.label }}</p>
+                        <p class="m-0 mt-1 text-xs leading-relaxed"
+                           style="color:#5a7a62;">{{ achievement.description }}</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">Pas encore de succès</p>
+                    <p class="m-0 mt-1 text-xs text-stone-300 leading-relaxed">Vos premiers succès apparaîtront ici</p>
+                </div>
+            </div>
+        </ion-item>
+    }
+</div>
@@ -0,0 +1,22 @@
+import {Component, input} from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+import {checkmarkCircleOutline, trophyOutline} from "ionicons/icons";
+import {addIcons} from "ionicons";
+import {GetAchievementDto} from "../../services/api";
+
+addIcons({
+    'check': checkmarkCircleOutline,
+    'trophy': trophyOutline
+});
+
+@Component({
+    selector: 'app-user-achievements',
+    templateUrl: './user-achievements.component.html',
+    styleUrls: ['./user-achievements.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class UserAchievementsComponent {
+    achievements = input.required<GetAchievementDto[]>();
+}