From 348beb937d951f6d24a2f76e55c6c56b34f6c161 Mon Sep 17 00:00:00 2001
From: thomas <thomas.ext@squadracer.com>
Date: Tue, 2 May 2023 12:57:30 +0200
Subject: [PATCH] feat(anchorScrolling): create challenge

---
 .../anchor-scrolling/src/app/app.component.ts | 15 +++-----------
 apps/anchor-scrolling/src/app/app.routes.ts   |  8 +++++++-
 .../anchor-scrolling/src/app/foo.component.ts | 15 ++++++++++++++
 .../src/app/home.component.ts                 | 20 +++++++++++++++++++
 ...n.component.ts => nav-button.component.ts} | 10 ++++------
 apps/anchor-scrolling/src/main.ts             |  7 ++-----
 6 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 apps/anchor-scrolling/src/app/foo.component.ts
 create mode 100644 apps/anchor-scrolling/src/app/home.component.ts
 rename apps/anchor-scrolling/src/app/{anchor-button.component.ts => nav-button.component.ts} (58%)

diff --git a/apps/anchor-scrolling/src/app/app.component.ts b/apps/anchor-scrolling/src/app/app.component.ts
index 3d1b969..5a930fb 100644
--- a/apps/anchor-scrolling/src/app/app.component.ts
+++ b/apps/anchor-scrolling/src/app/app.component.ts
@@ -1,19 +1,10 @@
 import { Component } from '@angular/core';
-import { AnchorButtonComponent } from './anchor-button.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [AnchorButtonComponent],
+  imports: [RouterOutlet],
   selector: 'app-root',
-  template: `
-    <div id="top" class="h-screen bg-gray-500">
-      Empty
-      <anchor-button href="#bottom">Scroll Bottom</anchor-button>
-    </div>
-    <div id="bottom" class="h-screen bg-blue-300">
-      I want to scroll each
-      <anchor-button href="#top">Scroll Top</anchor-button>
-    </div>
-  `,
+  template: ` <router-outlet></router-outlet> `,
 })
 export class AppComponent {}
diff --git a/apps/anchor-scrolling/src/app/app.routes.ts b/apps/anchor-scrolling/src/app/app.routes.ts
index 8762dfe..e73bb03 100644
--- a/apps/anchor-scrolling/src/app/app.routes.ts
+++ b/apps/anchor-scrolling/src/app/app.routes.ts
@@ -1,3 +1,9 @@
 import { Route } from '@angular/router';
+import { FooComponent } from './foo.component';
+import { HomeComponent } from './home.component';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  { path: 'home', component: HomeComponent },
+  { path: 'foo', component: FooComponent },
+  { path: '**', redirectTo: 'home' },
+];
diff --git a/apps/anchor-scrolling/src/app/foo.component.ts b/apps/anchor-scrolling/src/app/foo.component.ts
new file mode 100644
index 0000000..a5109a8
--- /dev/null
+++ b/apps/anchor-scrolling/src/app/foo.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NavButtonComponent } from './nav-button.component';
+
+@Component({
+  standalone: true,
+  imports: [NavButtonComponent],
+  selector: 'app-foo',
+  template: `
+    Welcome to foo page
+    <nav-button href="home" class="fixed top-3 left-1/2">Home Page</nav-button>
+    <div class="h-screen bg-blue-200">section 1</div>
+    <div class="h-screen bg-red-200">section 2</div>
+  `,
+})
+export class FooComponent {}
diff --git a/apps/anchor-scrolling/src/app/home.component.ts b/apps/anchor-scrolling/src/app/home.component.ts
new file mode 100644
index 0000000..836a198
--- /dev/null
+++ b/apps/anchor-scrolling/src/app/home.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NavButtonComponent } from './nav-button.component';
+
+@Component({
+  standalone: true,
+  imports: [NavButtonComponent],
+  selector: 'app-home',
+  template: `
+    <nav-button href="/foo" class="fixed top-3 left-1/2">Foo Page</nav-button>
+    <div id="top" class="h-screen bg-gray-500">
+      Empty
+      <nav-button href="#bottom">Scroll Bottom</nav-button>
+    </div>
+    <div id="bottom" class="h-screen bg-blue-300">
+      I want to scroll each
+      <nav-button href="#top">Scroll Top</nav-button>
+    </div>
+  `,
+})
+export class HomeComponent {}
diff --git a/apps/anchor-scrolling/src/app/anchor-button.component.ts b/apps/anchor-scrolling/src/app/nav-button.component.ts
similarity index 58%
rename from apps/anchor-scrolling/src/app/anchor-button.component.ts
rename to apps/anchor-scrolling/src/app/nav-button.component.ts
index d8d6c19..9e3b6d4 100644
--- a/apps/anchor-scrolling/src/app/anchor-button.component.ts
+++ b/apps/anchor-scrolling/src/app/nav-button.component.ts
@@ -1,12 +1,10 @@
 /* eslint-disable @angular-eslint/component-selector */
 import { Component, Input } from '@angular/core';
-import { RouterLinkWithHref } from '@angular/router';
 @Component({
-  selector: 'anchor-button',
+  selector: 'nav-button',
   standalone: true,
-  imports: [RouterLinkWithHref],
   template: `
-    <a [routerLink]="href">
+    <a [href]="href">
       <ng-content></ng-content>
     </a>
   `,
@@ -14,6 +12,6 @@ import { RouterLinkWithHref } from '@angular/router';
     class: 'block w-fit border border-red-500 rounded-md p-4 m-2',
   },
 })
-export class AnchorButtonComponent {
-  @Input() href = '#top';
+export class NavButtonComponent {
+  @Input() href = '';
 }
diff --git a/apps/anchor-scrolling/src/main.ts b/apps/anchor-scrolling/src/main.ts
index 544a349..3420d15 100644
--- a/apps/anchor-scrolling/src/main.ts
+++ b/apps/anchor-scrolling/src/main.ts
@@ -1,11 +1,8 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import {
-  provideRouter,
-  withEnabledBlockingInitialNavigation,
-} from '@angular/router';
+import { provideRouter } from '@angular/router';
 import { AppComponent } from './app/app.component';
 import { appRoutes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
-  providers: [provideRouter(appRoutes, withEnabledBlockingInitialNavigation())],
+  providers: [provideRouter(appRoutes)],
 }).catch((err) => console.error(err));