la base du site fonctionnelle

src/app/routes/profile/profile-list/profile-list.component.html

@@ -0,0 +1,30 @@
+<section class="pb-10 relative">
+  <div class="relative overflow-hidden">
+
+    <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
+      <div class="mt-8 mx-auto max-w-3xl space-y-2">
+        <app-search/>
+      </div>
+    </div>
+
+  </div>
+
+
+  <div class="max-w-6xl mx-auto px-4">
+    <app-display-profile-card (onDisplayChange)="showNewDisplay($event)"/>
+
+    @switch (display()){
+      @case ('list'.toUpperCase()){
+        <app-horizental-profile-list/>
+      }
+      @case ('grid'.toUpperCase()){
+        <app-vertical-profile-list/>
+      }
+      @default{
+        <app-vertical-profile-list/>
+      }
+    }
+
+  </div>
+</section>
+

src/app/routes/profile/profile-list/profile-list.component.spec.ts

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

src/app/routes/profile/profile-list/profile-list.component.ts

@@ -0,0 +1,47 @@
+import {Component, inject, signal} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import {SearchComponent} from "@app/shared/features/search/search.component";
+import {
+  HorizentalProfileItemComponent
+} from "@app/shared/components/horizental-profile-item/horizental-profile-item.component";
+import {
+  VerticalProfileItemComponent
+} from "@app/shared/components/vertical-profile-item/vertical-profile-item.component";
+import {DisplayProfileCardComponent} from "@app/shared/features/display-profile-card/display-profile-card.component";
+import {JsonPipe} from "@angular/common";
+import {
+  HorizentalProfileListComponent
+} from "@app/shared/components/horizental-profile-list/horizental-profile-list.component";
+import {
+  VerticalProfileListComponent
+} from "@app/shared/components/vertical-profile-list/vertical-profile-list.component";
+
+@Component({
+  selector: 'app-profile-list',
+  standalone: true,
+  imports: [
+    SearchComponent,
+    HorizentalProfileItemComponent,
+    VerticalProfileItemComponent,
+    DisplayProfileCardComponent,
+    JsonPipe,
+    HorizentalProfileListComponent,
+    VerticalProfileListComponent
+  ],
+  templateUrl: './profile-list.component.html',
+  styleUrl: './profile-list.component.scss'
+})
+export class ProfileListComponent {
+
+  private readonly route = inject(ActivatedRoute);
+  protected profiles = this.route.snapshot.data['profiles'];
+  protected display = signal<string>('grid'.toUpperCase());
+
+  constructor() {
+    console.log(this.profiles)
+  }
+
+  showNewDisplay($event: string) {
+    this.display.set($event.toUpperCase())
+  }
+}