start friend pop up

src/app/components/friend-page/friend-page.component.html

@@ -0,0 +1,66 @@
+<!-- Bouton d'ouverture du modal -->
+<button
+  data-modal-target="friends-modal"
+  data-modal-toggle="friends-modal"
+  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+  type="button"
+>
+  Amis
+</button>
+
+<!-- Modal principal -->
+<div
+  id="friends-modal"
+  tabindex="-1"
+  aria-hidden="true"
+  class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50"
+>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
+    <!-- En-tête du modal -->
+    <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Liste d'amis</h3>
+      <button
+        data-modal-toggle="friends-modal"
+        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Barre de recherche -->
+    <div class="p-4">
+      <input
+        type="text"
+        id="search-friends"
+        class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"
+        placeholder="Rechercher un ami..."
+      />
+    </div>
+
+    <!-- Contenu du modal -->
+    <div class="p-4 space-y-3">
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=1" alt="Friend 1">
+        <span class="text-gray-900 dark:text-white">Alice</span>
+      </div>
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=2" alt="Friend 2">
+        <span class="text-gray-900 dark:text-white">Bob</span>
+      </div>
+      <div class="friend flex items-center space-x-3">
+        <img class="w-10 h-10 rounded-full" src="https://i.pravatar.cc/100?img=3" alt="Friend 3">
+        <span class="text-gray-900 dark:text-white">Charlie</span>
+      </div>
+    </div>
+
+    <!-- Pied du modal -->
+    <div class="flex justify-end p-4 border-t dark:border-gray-700">
+      <button
+        data-modal-toggle="friends-modal"
+        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+      >
+        Fermer
+      </button>
+    </div>
+  </div>
+</div>

src/app/components/friend-page/friend-page.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FriendPageComponent } from './friend-page.component';
+
+describe('FriendPageComponent', () => {
+  let component: FriendPageComponent;
+  let fixture: ComponentFixture<FriendPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FriendPageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FriendPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/friend-page/friend-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-friend-page',
+  imports: [],
+  templateUrl: './friend-page.component.html',
+  styleUrl: './friend-page.component.css'
+})
+export class FriendPageComponent {
+
+}