44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { Router } from '@angular/router';
|
|
import { Store } from '@ngrx/store';
|
|
import { NgIcon, provideIcons } from '@ng-icons/core';
|
|
import { lucideUser, lucideLogIn, lucideUserPlus } from '@ng-icons/lucide';
|
|
import { selectCurrentUser } from '../../store/users/users.selectors';
|
|
|
|
@Component({
|
|
selector: 'app-user-bar',
|
|
standalone: true,
|
|
imports: [CommonModule, NgIcon],
|
|
viewProviders: [provideIcons({ lucideUser, lucideLogIn, lucideUserPlus })],
|
|
template: `
|
|
<div class="h-10 border-b border-border bg-card flex items-center justify-end px-3 gap-2">
|
|
<div class="flex-1"></div>
|
|
@if (user()) {
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<ng-icon name="lucideUser" class="w-4 h-4 text-muted-foreground" />
|
|
<span class="text-foreground">{{ user()?.displayName }}</span>
|
|
</div>
|
|
} @else {
|
|
<button (click)="goto('login')" class="px-2 py-1 text-sm rounded bg-secondary hover:bg-secondary/80 flex items-center gap-1">
|
|
<ng-icon name="lucideLogIn" class="w-4 h-4" />
|
|
Login
|
|
</button>
|
|
<button (click)="goto('register')" class="px-2 py-1 text-sm rounded bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-1">
|
|
<ng-icon name="lucideUserPlus" class="w-4 h-4" />
|
|
Register
|
|
</button>
|
|
}
|
|
</div>
|
|
`,
|
|
})
|
|
export class UserBarComponent {
|
|
private store = inject(Store);
|
|
private router = inject(Router);
|
|
user = this.store.selectSignal(selectCurrentUser);
|
|
|
|
goto(path: 'login' | 'register') {
|
|
this.router.navigate([`/${path}`]);
|
|
}
|
|
}
|