src/app/app.component.html

@@ -1,6 +1,12 @@
 <h1>Ratatouille</h1>
 
-<div class="wrapper">
+<nav>
-  <app-recipe-list></app-recipe-list>
+  <ul>
-  <app-recipe-form></app-recipe-form>
+    <li><a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a></li>
+    <li><a routerLink="/add" routerLinkActive="active" ariaCurrentWhenActive="page">Add Recipe</a></li>
+  </ul>
+</nav>
+
+<div id="page-wrapper">
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterOutlet, RouterLink } from '@angular/router';
 import { RecipeFormComponent } from './recipe-form/recipe-form.component';
 import { RecipeService } from './services/recipe.service';
 import { Recipe } from './model/recipe.model';
@@ -10,6 +10,7 @@ import { RecipeListComponent } from './components/recipe-list/recipe-list.compon
   standalone: true,
   imports: [
     RouterOutlet,
+    RouterLink,
     RecipeFormComponent,
     RecipeListComponent,
   ],

src/app/app.config.ts

@@ -6,3 +6,4 @@ import { routes } from './app.routes';
 export const appConfig: ApplicationConfig = {
   providers: [provideRouter(routes)]
 };
+

src/app/app.routes.ts

@@ -1,3 +1,9 @@
-import { Routes } from '@angular/router';
+import { Routes } from '@angular/router'
 
-export const routes: Routes = [];
+import { RecipeFormComponent } from "./recipe-form/recipe-form.component";
+import { RecipeListComponent } from "./components/recipe-list/recipe-list.component";
+
+export const routes: Routes = [
+  { path: 'add', component: RecipeFormComponent },
+  { path: '', component: RecipeListComponent }
+];

src/app/components/recipe-list/recipe-list.component.css

@@ -0,0 +1,5 @@
+#recipe-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+}

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

@@ -1,4 +1,3 @@
-<p>recipe-list works!</p>
+<div id="recipe-list">
-<div>
   <app-recipe-mini *ngFor="let recipe of recipes" [recipe]="recipe"></app-recipe-mini>
 </div>

src/app/components/recipe-mini/recipe-mini.component.css

@@ -3,7 +3,6 @@
   border-radius: 8px;
   overflow: hidden;
   width: 300px;
-  margin: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -59,6 +58,7 @@ button span {
   position: relative;
   z-index: 1;
 }
+
 button i {
   position: absolute;
   inset: 0;
@@ -105,9 +105,11 @@ button:hover i::after {
   0% {
     transform: translateX(0);
   }
+
   50% {
     transform: translateX(5px);
   }
+
   100% {
     transform: translateX(0);
   }
@@ -117,9 +119,11 @@ button:hover i::after {
   0% {
     box-shadow: #27272c;
   }
+
   50% {
     box-shadow: 0 0 25px var(--clr);
   }
+
   100% {
     box-shadow: #27272c;
   }

src/app/components/recipe-mini/recipe-mini.component.html

@@ -1,6 +1,7 @@
 <div class="recipe-card">
   <div class="recipe-image">
-    <img [src]="recipe.image" onerror="this.onerror=null;this.src='https://placehold.co/100x100';" alt="{{recipe.name}}">
+    <img [src]="recipe.image" onerror="this.onerror=null;this.src='https://placehold.co/100x100';"
+      alt="{{recipe.name}}">
   </div>
   <div class="recipe-details">
     <h2>{{recipe.name}}</h2>

src/styles.css

@@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+  font-family: "Helvetica";
+}