114 lines
2.3 KiB
TypeScript
114 lines
2.3 KiB
TypeScript
import {
|
|
Component,
|
|
computed,
|
|
input
|
|
} from '@angular/core';
|
|
import { UserStatus } from '../../../shared-kernel';
|
|
|
|
@Component({
|
|
selector: 'app-user-avatar',
|
|
standalone: true,
|
|
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' | '2xl'>('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';
|
|
case '2xl':
|
|
return 'w-6 h-6';
|
|
}
|
|
});
|
|
|
|
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';
|
|
case '2xl':
|
|
return 'w-32 h-32';
|
|
}
|
|
}
|
|
|
|
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;
|
|
case '2xl':
|
|
return 128;
|
|
}
|
|
}
|
|
|
|
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';
|
|
case '2xl':
|
|
return 'text-4xl font-semibold';
|
|
}
|
|
}
|
|
}
|