card

1import { computed, Directive, input } from '@angular/core'
2 
3import { cn } from '~/lib/utils'
4 
5@Directive({
6  standalone: true,
7  selector: 'div[ubCard]',
8  host: {
9    '[class]': 'computedClass()',
10  },
11})
12export class UbCardDirective {
13  readonly class = input<string>()
14  protected computedClass = computed(() =>
15    cn('rounded-xl border bg-card text-card-foreground shadow', this.class()),
16  )
17}
18 
19@Directive({
20  standalone: true,
21  selector: 'div[ubCardHeader]',
22  host: {
23    '[class]': 'computedClass()',
24  },
25})
26export class UbCardHeaderDirective {
27  readonly class = input<string>()
28  protected computedClass = computed(() =>
29    cn('flex flex-col space-y-1.5 p-6', this.class()),
30  )
31}
32 
33@Directive({
34  standalone: true,
35  selector: 'h3[ubCardTitle]',
36  host: {
37    '[class]': 'computedClass()',
38  },
39})
40export class UbCardTitleDirective {
41  readonly class = input<string>()
42  protected computedClass = computed(() =>
43    cn('font-semibold leading-none tracking-tight', this.class()),
44  )
45}
46 
47@Directive({
48  standalone: true,
49  selector: 'p[ubCardDescription]',
50  host: {
51    '[class]': 'computedClass()',
52  },
53})
54export class UbCardDescriptionDirective {
55  readonly class = input<string>()
56  protected computedClass = computed(() =>
57    cn('text-sm text-muted-foreground', this.class()),
58  )
59}
60 
61@Directive({
62  standalone: true,
63  selector: 'div[ubCardContent]',
64  host: {
65    '[class]': 'computedClass()',
66  },
67})
68export class UbCardContentDirective {
69  readonly class = input<string>()
70  protected computedClass = computed(() => cn('p-6 pt-0', this.class()))
71}
72 
73@Directive({
74  standalone: true,
75  selector: 'div[ubCardFooter]',
76  host: {
77    '[class]': 'computedClass()',
78  },
79})
80export class UbCardFooterDirective {
81  readonly class = input<string>()
82  protected computedClass = computed(() =>
83    cn('flex items-center p-6 pt-0', this.class()),
84  )
85}