Bashayer

src/app/app.component.html

@@ -1 +1,2 @@
-<app-home></app-home>
+<app-navbar></app-navbar>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { HomeComponent } from './pages/home/home.component';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [HomeComponent],
+  imports: [RouterOutlet, NavbarComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'TASK-NG-Routing';

src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
+import { TripsListComponent } from './pages/trips-list/trips-list.component';
+import { TripComponent } from './pages/trip/trip.component';
+import { HomeComponent } from './pages/home/home.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { path: 'trips', component: TripsListComponent },
+  { path: 'trips/:slug', component: TripComponent },
+  { path: '', component: HomeComponent },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];

src/app/components/navbar/navbar.component.html

@@ -6,10 +6,10 @@
       <div class="navbar-links" id="navbarResponsive">
         <ul class="navbar-list">
           <li class="navbar-item">
-            <a href="#" class="navbar-link">Home</a>
+            <a href="/" class="navbar-link">Home</a>
           </li>
           <li class="navbar-item">
-            <a href="#" class="navbar-link">Trips</a>
+            <a href="/trips" class="navbar-link">Trips</a>
           </li>
         </ul>
       </div>

src/app/components/search-filter/search-filter.component.html

@@ -3,8 +3,10 @@
     type="search"
     class="search-input"
     placeholder="Search"
+    [value]="initialSearch"
     (input)="onSearch($event)"
   />
+
   <div class="filter-buttons">
     @for (level of difficultyLevels; track $index) {
     <button

src/app/components/search-filter/search-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DifficultyLevel } from '../../../data/trips';
 
 @Component({
@@ -11,8 +11,9 @@ import { DifficultyLevel } from '../../../data/trips';
 export class SearchFilterComponent {
   @Output() searchChange = new EventEmitter<string>();
   @Output() filterChange = new EventEmitter<DifficultyLevel>();
+  @Input() initialSearch: string = '';
 
-  difficultyLevels: DifficultyLevel[] = ['All','Easy', 'Moderate', 'Hard'];
+  difficultyLevels: DifficultyLevel[] = ['All', 'Easy', 'Moderate', 'Hard'];
   activeFilter: DifficultyLevel = 'All';
 
   onSearch(event: Event) {

src/app/components/trip-details/trip-details.component.html

@@ -2,19 +2,21 @@
   <div class="trip-details-content">
     <h2 class="trip-details-title">{{ trip.name }}</h2>
     <app-divider></app-divider>
-    <img
-      class="trip-details-image"
-      [src]="trip.img"
-      [alt]="trip.name"
-      width="500"
-      height="500"
-    />
-    <p class="trip-details-text">
-      City: {{ trip.city }}<br />
-      Length: {{ trip.length }}Km<br />
-      Rating: {{ trip.rating }}<br />
-      Difficulty: {{ trip.difficulty }}<br />
-      Details: {{ trip.details }}
-    </p>
+    <div *ngIf="trip">
+      <img
+        class="trip-details-image"
+        [src]="trip.img"
+        [alt]="trip.name"
+        width="500"
+        height="500"
+      />
+      <p class="trip-details-text">
+        City: {{ trip.city }}<br />
+        Length: {{ trip.length }}Km<br />
+        Rating: {{ trip.rating }}<br />
+        Difficulty: {{ trip.difficulty }}<br />
+        Details: {{ trip.details }}
+      </p>
+    </div>
   </div>
 </div>

src/app/components/trip-details/trip-details.component.ts

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { Trip } from '../../../data/trips';
 import { DividerComponent } from '../divider/divider.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-trip-details',
   standalone: true,
-  imports: [DividerComponent],
+  imports: [DividerComponent, CommonModule],
   templateUrl: './trip-details.component.html',
-  styleUrl: './trip-details.component.css'
+  styleUrl: './trip-details.component.css',
 })
 export class TripDetailsComponent {
   @Input() trip!: Trip;

src/app/components/trips-grid/trips-grid.component.html

@@ -1,5 +1,7 @@
 <div class="trips-grid">
   @for (trip of trips; track trip.id) {
-  <app-trip-card [trip]="trip"></app-trip-card>
+  <a [routerLink]="['/trips', trip.slug]">
+    <app-trip-card [trip]="trip"></app-trip-card>
+  </a>
   }
 </div>

src/app/components/trips-grid/trips-grid.component.ts

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
-import { Trip } from '../../../data/trips';
+import { Trip, trips } from '../../../data/trips';
 import { TripCardComponent } from '../trip-card/trip-card.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-trips-grid',
   standalone: true,
-  imports: [TripCardComponent],
+  imports: [TripCardComponent, RouterLink],
   templateUrl: './trips-grid.component.html',
-  styleUrl: './trips-grid.component.css'
+  styleUrl: './trips-grid.component.css',
 })
 export class TripsGridComponent {
   @Input() trips: Trip[] = [];

src/app/pages/home/home.component.css

@@ -1,25 +1 @@
-.explore-section {
-  padding-top: 6rem;
-  padding-bottom: 6rem;
-  background-color: #ffffff;
-}
 
-.explore-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-.explore-title {
-  text-align: center;
-  text-transform: uppercase;
-  font-size: 1.875rem;
-  font-weight: 700;
-  color: #2c3e50;
-}
-
-@media (min-width: 768px) {
-  .explore-title {
-    font-size: 2.25rem;
-  }
-}

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

@@ -1,25 +1,4 @@
-<app-navbar></app-navbar>
-
 <app-banner
   title="Welcome To Hike"
   subtitle="a delightful way to explore nature with friends and family"
 ></app-banner>
-
-<section class="explore-section" id="portfolio">
-  <div class="explore-container">
-    <h2 class="explore-title">Explore Trips</h2>
-    <br />
-    <app-search-filter
-      (searchChange)="handleSearch($event)"
-      (filterChange)="handleFilter($event)"
-    ></app-search-filter>
-    <app-divider></app-divider>
-    <app-trips-grid
-      [trips]="filteredTrips"
-    ></app-trips-grid>
-  </div>
-</section>
-
-@if (selectedTrip) {
-<app-trip-details [trip]="selectedTrip"></app-trip-details>
-}

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

@@ -10,46 +10,10 @@ import { NavbarComponent } from '../../components/navbar/navbar.component';
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [
-    BannerComponent,
-    SearchFilterComponent,
-    DividerComponent,
-    TripsGridComponent,
-    TripDetailsComponent,
-    NavbarComponent,
-  ],
+  imports: [BannerComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })
 export class HomeComponent {
-  trips: Trip[] = trips;
-  filteredTrips: Trip[] = [...trips];
   selectedTrip: Trip = trips[0];
-  searchQuery: string = '';
-  activeDifficultyFilter: DifficultyLevel = 'All';
-
-  handleSearch(searchTerm: string) {
-    this.searchQuery = searchTerm.toLowerCase();
-    this.applyFilters();
-  }
-
-  handleFilter(difficulty: DifficultyLevel) {
-    this.activeDifficultyFilter = difficulty;
-    this.applyFilters();
-  }
-
-  private applyFilters() {
-    this.filteredTrips = this.trips.filter((trip) => {
-      const matchesSearch =
-        !this.searchQuery ||
-        trip.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-        trip.city.toLowerCase().includes(this.searchQuery.toLowerCase()) 
-
-      const matchesDifficulty =
-        this.activeDifficultyFilter === 'All' ||
-        trip.difficulty === this.activeDifficultyFilter;
-
-      return matchesSearch && matchesDifficulty;
-    });
-  }
 }

src/app/pages/trip/trip.component.css

@@ -0,0 +1,25 @@
+.explore-section {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  background-color: #ffffff;
+}
+
+.explore-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.explore-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+@media (min-width: 768px) {
+  .explore-title {
+    font-size: 2.25rem;
+  }
+}

src/app/pages/trip/trip.component.html

@@ -0,0 +1,3 @@
+@if (trip) {
+<app-trip-details [trip]="trip"></app-trip-details>
+}

src/app/pages/trip/trip.component.spec.ts

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

src/app/pages/trip/trip.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { Trip, trips } from '../../../data/trips';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { TripDetailsComponent } from '../../components/trip-details/trip-details.component';
+
+@Component({
+  selector: 'app-trip',
+  standalone: true,
+  imports: [CommonModule, TripDetailsComponent],
+  templateUrl: './trip.component.html',
+  styleUrl: './trip.component.css',
+})
+export class TripComponent {
+  trip!: Trip | undefined;
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+    this.route.params.subscribe((params) => {
+      const slug = params['slug'];
+      this.trip = trips.find((t) => t.slug === slug);
+
+      if (!this.trip) {
+        this.router.navigate(['/trips']);
+      }
+    });
+  }
+}

src/app/pages/trips-list/trips-list.component.css

@@ -0,0 +1,25 @@
+.explore-section {
+  padding-top: 6rem;
+  padding-bottom: 6rem;
+  background-color: #ffffff;
+}
+
+.explore-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.explore-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1.875rem;
+  font-weight: 700;
+  color: #2c3e50;
+}
+
+@media (min-width: 768px) {
+  .explore-title {
+    font-size: 2.25rem;
+  }
+}

src/app/pages/trips-list/trips-list.component.html

@@ -0,0 +1,13 @@
+<section class="explore-section" id="portfolio">
+  <div class="explore-container">
+    <h2 class="explore-title">Explore Trips</h2>
+    <br />
+    <app-search-filter
+      [initialSearch]="searchQuery"
+      (searchChange)="handleSearch($event)"
+      (filterChange)="handleFilter($event)"
+    ></app-search-filter>
+    <app-divider></app-divider>
+    <app-trips-grid [trips]="filteredTrips"></app-trips-grid>
+  </div>
+</section>