Replace Button component with directive

src/app/common-components/btn.directive.ts

@@ -0,0 +1,42 @@
+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+  selector: 'button[appBtn][main], a[appBtn][main], button[appBtn]:not([main]), a[appBtn]:not([main])',
+  standalone: true,
+})
+export class BtnDirective implements OnInit {
+  private readonly baseClasses = ['h-12', 'inline-flex', 'items-center', 'rounded-lg', 'px-5', 'py-2.5', 'gap-2', 'text-sm', 'font-medium'];
+
+  private readonly mainClasses = ['bg-primary-700', 'text-white', 'hover:bg-primary-800', 'focus:ring-primary-300', 'dark:bg-primary-600', 'dark:hover:bg-primary-700'];
+
+  private readonly defaultClasses = [
+    'border',
+    'border-gray-200',
+    'bg-white',
+    'text-gray-900',
+    'hover:bg-gray-100',
+    'hover:text-primary-700',
+    'dark:border-gray-600',
+    'dark:bg-gray-800',
+    'dark:text-gray-400',
+    'dark:hover:bg-gray-700',
+    'dark:hover:text-white',
+  ];
+
+  constructor(private el: ElementRef<HTMLButtonElement | HTMLAnchorElement>) {}
+
+  get main(): boolean {
+    return this.el.nativeElement.hasAttribute('main');
+  }
+
+  ngOnInit() {
+    const element = this.el.nativeElement;
+
+    element.setAttribute('type', 'button');
+
+    this.baseClasses.forEach((cls) => element.classList.add(cls));
+
+    const variantClasses = this.main ? this.mainClasses : this.defaultClasses;
+    variantClasses.forEach((cls) => element.classList.add(cls));
+  }
+}

src/app/components/main-layout/main-layout.component.html

@@ -16,10 +16,10 @@
       <div class="hidden w-full md:block md:w-auto" id="navbar-solid-bg">
         <div class="flex flex-col md:flex-row">
           @if (stravaAuthSvc.isLoggedIn()) {
-            <app-btn [main]="true" (click)="stravaAuthSvc.logOut()">
-              <ng-icon name="tablerLogout" class="h-full" />
+            <button appBtn main (click)="stravaAuthSvc.logOut()">
               Wyloguj
-            </app-btn>
+              <div class="h-6"><ng-icon name="tablerLogout" /></div>
+            </button>
           } @else {
             <app-strava-btn (click)="stravaAuthSvc.logIn()" />
           }

src/app/components/main-layout/main-layout.component.ts

@@ -6,12 +6,12 @@ import { AuthService } from '../../services/auth.service';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { tablerLogin, tablerLogout, tablerMenu2 } from '@ng-icons/tabler-icons';
 import { StravaBtnComponent } from '../../common-components/strava-btn/strava-btn.component';
-import { BtnComponent } from '../../common-components/btn/btn.component';
+import { BtnDirective } from '../../common-components/btn.directive';
 
 @Component({
   selector: 'app-main-layout',
   standalone: true,
-  imports: [NgIconComponent, StravaBtnComponent, BtnComponent],
+  imports: [NgIconComponent, StravaBtnComponent, BtnDirective],
   providers: [provideIcons({ tablerLogout, tablerLogin, tablerMenu2 })],
   templateUrl: './main-layout.component.html',
   styleUrl: './main-layout.component.scss',

src/app/components/map-popup/map-popup.component.html

@@ -23,7 +23,7 @@ <h3 class="mb-2 text-lg font-semibold text-gray-700">
   }
 
   <div class="flex flex-row items-start gap-2">
-    <app-btn (click)="switchToParent()">Wyżej</app-btn>
-    <app-btn (click)="closeBtnPressed()" [main]="true">Zamknij</app-btn>
+    <button appBtn (click)="switchToParent()">Wyżej</button>
+    <button appBtn (click)="closeBtnPressed()" main>Zamknij</button>
   </div>
 </div>

src/app/components/map-popup/map-popup.component.ts

@@ -1,12 +1,12 @@
 import { Component, computed, effect, EventEmitter, inject, model, Output } from '@angular/core';
 import { AdmService } from '../../services/adm.service';
 import { environment } from '../../../environments/environment';
-import { BtnComponent } from '../../common-components/btn/btn.component';
+import { BtnDirective } from '../../common-components/btn.directive';
 
 @Component({
   selector: 'app-map-popup',
   standalone: true,
-  imports: [BtnComponent],
+  imports: [BtnDirective],
   templateUrl: './map-popup.component.html',
   styleUrl: './map-popup.component.scss',
 })

src/app/components/welcome-screen/welcome-screen.component.html

@@ -9,7 +9,10 @@ <h5 class="mb-2 text-lg font-semibold tracking-tight text-gray-900 dark:text-whi
       </p>
       <div class="flex flex-row flex-wrap items-center gap-2">
         <app-strava-btn (click)="stravaAuthSvc.logIn()" />
-        <app-btn (click)="demoClick()">Demo</app-btn>
+        <a routerLink="/home" appBtn>
+          <ng-icon name="tablerMap" class="h-full" />
+          Demo
+        </a>
       </div>
     </div>
   </div>

src/app/components/welcome-screen/welcome-screen.component.ts

@@ -2,13 +2,16 @@ import { Component, inject } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { CustomNGXLoggerService } from 'ngx-logger';
 import { StravaBtnComponent } from '../../common-components/strava-btn/strava-btn.component';
-import { BtnComponent } from '../../common-components/btn/btn.component';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
+import { BtnDirective } from '../../common-components/btn.directive';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { tablerMap } from '@ng-icons/tabler-icons';
 
 @Component({
   selector: 'app-welcome-screen',
   standalone: true,
-  imports: [StravaBtnComponent, BtnComponent],
+  imports: [StravaBtnComponent, BtnDirective, RouterLink, NgIcon],
+  providers: [provideIcons({ tablerMap })],
   templateUrl: './welcome-screen.component.html',
   styleUrl: './welcome-screen.component.scss',
 })
@@ -25,8 +28,4 @@ export class WelcomeScreenComponent {
     this.logger.info('Login clicked');
     this.stravaAuthSvc.logIn();
   }
-
-  demoClick() {
-    this.routerSvc.navigate(['home']);
-  }
 }