Added tooltip components

src/app/components/challenge-card/challenge-card.component.html

@@ -0,0 +1,3 @@
+<p>
+  challenge-card works!
+</p>

src/app/components/challenge-card/challenge-card.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-challenge-card',
+  templateUrl: './challenge-card.component.html',
+  styleUrls: ['./challenge-card.component.scss'],
+})
+export class ChallengeCardComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+}

src/app/components/friends/friends-list.component.html

@@ -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>

src/app/components/title-part/title-part.component.html

@@ -1,3 +1,3 @@
-<p class="font-sans font-semibold ml-4 mt-0 mb-0 text-[14px] text-gray-500">
+<p class="font-mono font-semibold ml-4 mt-0 mb-0 text-[14px] text-gray-500">
-    • <em> {{ textInfo() }} </em>
+    {{ textInfo() }}
 </p>

src/app/components/title-part/title-part.component.ts

@@ -10,5 +10,7 @@ import {IonicModule} from "@ionic/angular";
     ]
 })
 export class TitlePartComponent {
-    textInfo = input.required<string>();
+    textInfo = input('', {
+        transform: (x: string) => x.toUpperCase()
+    });
 }

src/app/components/tooltip/tooltip.component.html

@@ -0,0 +1,9 @@
+<div [ngClass]="{
+  'border-l-red-700': color() == 'red',
+  'border-l-green-700': color() == 'green'}"
+     class="ml-4 mr-5 pl-4 border border-gray-400 rounded-r-xl border-l-{{color()}}-700 border-l-4 bg-[#f7f6f2]">
+    <p class="text-[11px] text-gray-600">
+        <strong class="text-gray-900">{{ title() }}</strong>
+        — {{ content() }}
+    </p>
+</div>

src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,16 @@
+import {Component, input} from '@angular/core';
+import {NgClass} from "@angular/common";
+
+@Component({
+    selector: 'app-tooltip',
+    templateUrl: './tooltip.component.html',
+    styleUrls: ['./tooltip.component.scss'],
+    imports: [
+        NgClass
+    ]
+})
+export class TooltipComponent {
+    title = input.required<string>();
+    content = input.required<string>();
+    color = input<string>();
+}

src/app/pages/groups/groups.component.html

@@ -0,0 +1,8 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-title class="font-mono">Mes groupes</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content style="--background: #f7f6f2;">
+</ion-content>

src/app/pages/groups/groups.component.ts

@@ -1,10 +1,13 @@
 import {Component} from '@angular/core';
+import {IonicModule} from "@ionic/angular";
 
 @Component({
     selector: 'app-groups',
     templateUrl: './groups.component.html',
     styleUrls: ['./groups.component.scss'],
-    imports: []
+    imports: [
+        IonicModule
+    ]
 })
 export class GroupsComponent {
 }

src/app/pages/home/home.component.html

@@ -10,9 +10,23 @@
                 <ion-icon slot="icon-only" name="add"></ion-icon>
             </ion-button>
         </ion-buttons>
-        <ion-title>BeReady</ion-title>
+        <ion-title class="font-mono">BeReady</ion-title>
     </ion-toolbar>
 </ion-header>
 
 <ion-content style="--background: #f7f6f2;">
+    <div class="mt-4">
+        <app-title-part textInfo="Défi bonus du jour"></app-title-part>
+        <app-challenge-card></app-challenge-card>
+    </div>
+
+    <div class="mt-4">
+        <app-title-part textInfo="Vote en attente"></app-title-part>
+        <app-challenge-card></app-challenge-card>
+    </div>
+
+    <div class="mt-4">
+        <app-title-part textInfo="Défis en cours"></app-title-part>
+        <app-challenge-card></app-challenge-card>
+    </div>
 </ion-content>

src/app/pages/home/home.component.ts

@@ -2,6 +2,8 @@ import {Component} from '@angular/core';
 import {IonicModule} from "@ionic/angular";
 import {addIcons} from "ionicons";
 import {walkOutline, addOutline} from "ionicons/icons";
+import {TitlePartComponent} from "../../components/title-part/title-part.component";
+import {ChallengeCardComponent} from "../../components/challenge-card/challenge-card.component";
 
 addIcons({
     'profile': walkOutline,
@@ -13,7 +15,9 @@ addIcons({
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.scss'],
     imports: [
-        IonicModule
+        IonicModule,
+        TitlePartComponent,
+        ChallengeCardComponent
     ]
 })
 export class HomeComponent {