avatar

1import { computed, Directive, input } from '@angular/core'
2import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
3 
4import { cn } from '~/lib/utils'
5 
6@Directive({
7  standalone: true,
8  selector: 'span[ubAvatar]',
9  hostDirectives: [RdxAvatarRootDirective],
10  host: {
11    '[class]': 'computedClass()',
12  },
13})
14export class UbAvatarDirective {
15  readonly class = input<string>()
16 
17  readonly computedClass = computed(() => {
18    return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
19  })
20}
21 
22@Directive({
23  standalone: true,
24  selector: 'img[ubAvatarImage]',
25  hostDirectives: [
26    {
27      directive: RdxAvatarImageDirective,
28      inputs: ['src'],
29    },
30  ],
31  host: {
32    '[class]': 'computedClass()',
33  },
34})
35export class UbAvatarImageDirective {
36  readonly class = input<string>()
37 
38  readonly computedClass = computed(() => {
39    return cn('aspect-square h-full w-full', this.class())
40  })
41}
42 
43@Directive({
44  standalone: true,
45  selector: 'span[ubAvatarFallback]',
46  hostDirectives: [
47    {
48      directive: RdxAvatarFallbackDirective,
49      inputs: ['delayMs'],
50    },
51  ],
52  host: {
53    '[class]': 'computedClass()',
54  },
55})
56export class UbAvatarFallbackDirective {
57  readonly class = input<string>()
58 
59  readonly computedClass = computed(() => {
60    return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
61  })
62}