diff --git a/src/app/common-components/btn/btn.component.html b/src/app/common-components/btn/btn.component.html new file mode 100644 index 0000000..258375b --- /dev/null +++ b/src/app/common-components/btn/btn.component.html @@ -0,0 +1,6 @@ + diff --git a/src/app/common-components/btn/btn.component.spec.ts b/src/app/common-components/btn/btn.component.spec.ts new file mode 100644 index 0000000..474376c --- /dev/null +++ b/src/app/common-components/btn/btn.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BtnComponent } from './btn.component'; + +describe('BtnComponent', () => { + let component: BtnComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BtnComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(BtnComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/common-components/btn/btn.component.ts b/src/app/common-components/btn/btn.component.ts new file mode 100644 index 0000000..69cb7ea --- /dev/null +++ b/src/app/common-components/btn/btn.component.ts @@ -0,0 +1,33 @@ +import { Component, computed, input } from '@angular/core'; + +@Component({ + selector: 'app-btn', + standalone: true, + imports: [], + templateUrl: './btn.component.html', +}) +export class BtnComponent { + main = input(false); + + btnClass = computed(() => { + const clasess = ['h-12', 'flex', 'flex-row', 'items-center', 'rounded-lg', 'px-5', 'py-2.5', 'text-sm', 'font-medium']; + + if (this.main()) { + return clasess.concat(['bg-primary-700', 'text-white', 'hover:bg-primary-800', 'focus:ring-primary-300', 'dark:bg-primary-600', 'dark:hover:bg-primary-700']); + } else { + return clasess.concat([ + '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', + ]); + } + }); +} diff --git a/src/app/common-components/strava-btn/strava-btn.component.html b/src/app/common-components/strava-btn/strava-btn.component.html index 706dc18..38cf9ba 100644 --- a/src/app/common-components/strava-btn/strava-btn.component.html +++ b/src/app/common-components/strava-btn/strava-btn.component.html @@ -1,3 +1,3 @@ - diff --git a/src/app/common-components/strava-btn/strava-btn.component.ts b/src/app/common-components/strava-btn/strava-btn.component.ts index 9bf3c8c..63e2899 100644 --- a/src/app/common-components/strava-btn/strava-btn.component.ts +++ b/src/app/common-components/strava-btn/strava-btn.component.ts @@ -1,19 +1,12 @@ -import { Component } from '@angular/core'; -import { EventEmitter, Output } from '@angular/core'; -import { provideIcons, NgIconComponent } from '@ng-icons/core'; -import { tablerLogin, tablerLogout } from '@ng-icons/tabler-icons'; +import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'app-strava-btn', standalone: true, - imports: [NgIconComponent], + imports: [], templateUrl: './strava-btn.component.html', - providers: [provideIcons({ tablerLogout, tablerLogin })], + providers: [], }) export class StravaBtnComponent { - @Output() clicked = new EventEmitter(); - - onButtonClick() { - this.clicked.emit(); - } + @HostBinding('class') class = 'h-12'; } diff --git a/src/app/components/main-layout/main-layout.component.html b/src/app/components/main-layout/main-layout.component.html index 0e502e0..3f86f1d 100644 --- a/src/app/components/main-layout/main-layout.component.html +++ b/src/app/components/main-layout/main-layout.component.html @@ -1,22 +1,30 @@
-