82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { NgOptimizedImage } from '@angular/common';
|
|
import {
|
|
Component,
|
|
computed,
|
|
input
|
|
} from '@angular/core';
|
|
import { UserStatus } from '../../../shared-kernel';
|
|
|
|
@Component({
|
|
selector: 'app-user-avatar',
|
|
standalone: true,
|
|
imports: [NgOptimizedImage],
|
|
templateUrl: './user-avatar.component.html',
|
|
host: {
|
|
style: 'display: contents;'
|
|
}
|
|
})
|
|
export class UserAvatarComponent {
|
|
name = input.required<string>();
|
|
avatarUrl = input<string | undefined | null>();
|
|
size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('sm');
|
|
ringClass = input<string>('');
|
|
status = input<UserStatus | undefined>();
|
|
showStatusBadge = input(false);
|
|
|
|
statusBadgeColor = computed(() => {
|
|
switch (this.status()) {
|
|
case 'online': return 'bg-green-500';
|
|
case 'away': return 'bg-yellow-500';
|
|
case 'busy': return 'bg-red-500';
|
|
case 'offline': return 'bg-gray-500';
|
|
case 'disconnected': return 'bg-gray-500';
|
|
default: return 'bg-gray-500';
|
|
}
|
|
});
|
|
|
|
statusBadgeSizeClass = computed(() => {
|
|
switch (this.size()) {
|
|
case 'xs': return 'w-2 h-2';
|
|
case 'sm': return 'w-3 h-3';
|
|
case 'md': return 'w-3.5 h-3.5';
|
|
case 'lg': return 'w-4 h-4';
|
|
case 'xl': return 'w-4.5 h-4.5';
|
|
}
|
|
});
|
|
|
|
initial(): string {
|
|
return this.name()?.charAt(0)
|
|
?.toUpperCase() ?? '?';
|
|
}
|
|
|
|
sizeClasses(): string {
|
|
switch (this.size()) {
|
|
case 'xs': return 'w-7 h-7';
|
|
case 'sm': return 'w-8 h-8';
|
|
case 'md': return 'w-10 h-10';
|
|
case 'lg': return 'w-12 h-12';
|
|
case 'xl': return 'w-16 h-16';
|
|
}
|
|
}
|
|
|
|
sizePx(): number {
|
|
switch (this.size()) {
|
|
case 'xs': return 28;
|
|
case 'sm': return 32;
|
|
case 'md': return 40;
|
|
case 'lg': return 48;
|
|
case 'xl': return 64;
|
|
}
|
|
}
|
|
|
|
textClass(): string {
|
|
switch (this.size()) {
|
|
case 'xs': return 'text-xs';
|
|
case 'sm': return 'text-sm';
|
|
case 'md': return 'text-base font-semibold';
|
|
case 'lg': return 'text-lg font-semibold';
|
|
case 'xl': return 'text-xl font-semibold';
|
|
}
|
|
}
|
|
}
|