diff --git a/package-lock.json b/package-lock.json index 4505a27..9607cb0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,8 @@ "@angular/forms": "^21.0.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", + "@fortawesome/angular-fontawesome": "^4.0.0", + "@fortawesome/free-solid-svg-icons": "^7.1.0", "@tanstack/angular-query-experimental": "^5.90.16", "rxjs": "~7.8.0", "tslib": "^2.3.0" @@ -1572,6 +1574,52 @@ "node": ">=18" } }, + "node_modules/@fortawesome/angular-fontawesome": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-4.0.0.tgz", + "integrity": "sha512-TCqHqT5ovFY1A4RgMpoBUgS+RX3OVs39+CzHFgzDhbCPAopOa26J748TZJcuZwJAvGAk9tbWeVEmWuLByINAeg==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^7.1.0", + "tslib": "^2.8.1" + }, + "peerDependencies": { + "@angular/core": "^21.0.0" + } + }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz", + "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz", + "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.1.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz", + "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "7.1.0" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@inquirer/ansi": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-1.0.2.tgz", diff --git a/package.json b/package.json index dbcdcde..0ea5778 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,8 @@ "@angular/forms": "^21.0.0", "@angular/platform-browser": "^21.0.0", "@angular/router": "^21.0.0", + "@fortawesome/angular-fontawesome": "^4.0.0", + "@fortawesome/free-solid-svg-icons": "^7.1.0", "@tanstack/angular-query-experimental": "^5.90.16", "rxjs": "~7.8.0", "tslib": "^2.3.0" diff --git a/src/app/app.html b/src/app/app.html index 3c5683f..3f5e700 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,4 +1,5 @@ + +
-
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 3da0fa4..08ec720 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,5 +1,5 @@ import { Routes } from '@angular/router'; -import { RecipeView } from './recipe-view/recipe-view'; +import { RecipePage } from './recipe-page/recipe-page'; import { RecipesPage } from './recipes-page/recipes-page'; export const routes: Routes = [ @@ -9,6 +9,6 @@ export const routes: Routes = [ }, { path: 'recipes/:username/:slug', - component: RecipeView, + component: RecipePage, }, ]; diff --git a/src/app/app.ts b/src/app/app.ts index fd2ab55..35b84e0 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,10 +1,12 @@ import { Component, signal } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { Header } from './header/header'; +import { Nav } from './nav/nav'; +import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @Component({ selector: 'app-root', - imports: [RouterOutlet, Header], + imports: [RouterOutlet, Header, Nav, FontAwesomeModule], templateUrl: './app.html', styleUrl: './app.css', }) diff --git a/src/app/header/header.html b/src/app/header/header.html index 80316ea..06e72fc 100644 --- a/src/app/header/header.html +++ b/src/app/header/header.html @@ -1,8 +1,9 @@ -

Meals Made Easy

-@if (isLoggedIn()) { -

Welcome {{ username() }}!

- -} @else { - -} -Browse Recipes +
+

Meals Made Easy

+ @if (isLoggedIn()) { +

Welcome {{ username() }}!

+ + } @else { + + } +
diff --git a/src/app/header/header.ts b/src/app/header/header.ts index 30d517a..4b58b96 100644 --- a/src/app/header/header.ts +++ b/src/app/header/header.ts @@ -1,10 +1,9 @@ import { Component, computed, inject } from '@angular/core'; import { AuthService } from '../service/auth.service'; -import { RouterLink } from '@angular/router'; @Component({ selector: 'app-header', - imports: [RouterLink], + imports: [], templateUrl: './header.html', styleUrl: './header.css', }) diff --git a/src/app/model/Recipe.model.ts b/src/app/model/Recipe.model.ts index a3f38e8..6b2a87d 100644 --- a/src/app/model/Recipe.model.ts +++ b/src/app/model/Recipe.model.ts @@ -17,9 +17,11 @@ export interface RecipeView { export interface Recipe { id: number; + isPublic: boolean; mainImage: ImageView; owner: ResourceOwner; slug: string; + starCount: number; text: string; title: string; } diff --git a/src/app/recipe-view/recipe-view-card/recipe-view-card.css b/src/app/nav/nav.css similarity index 100% rename from src/app/recipe-view/recipe-view-card/recipe-view-card.css rename to src/app/nav/nav.css diff --git a/src/app/nav/nav.html b/src/app/nav/nav.html new file mode 100644 index 0000000..b2f5a6f --- /dev/null +++ b/src/app/nav/nav.html @@ -0,0 +1,6 @@ + diff --git a/src/app/nav/nav.spec.ts b/src/app/nav/nav.spec.ts new file mode 100644 index 0000000..b2416ca --- /dev/null +++ b/src/app/nav/nav.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Nav } from './nav'; + +describe('Nav', () => { + let component: Nav; + let fixture: ComponentFixture