badge

1import type { VariantProps } from 'class-variance-authority'
2import { computed, Directive, input } from '@angular/core'
3 
4import { cva } from 'class-variance-authority'
5import { cn } from '~/lib/utils'
6 
7export const badgeVariants = cva(
8  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
9  {
10    variants: {
11      variant: {
12        default:
13          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
14        secondary:
15          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
16        destructive:
17          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
18        outline: 'text-foreground',
19      },
20    },
21    defaultVariants: {
22      variant: 'default',
23    },
24  },
25)
26 
27type BadgeProps = VariantProps<typeof badgeVariants>
28 
29export type UbBadgeVariant = NonNullable<BadgeProps['variant']>
30 
31@Directive({
32  selector: '[ubBadge]',
33  standalone: true,
34  host: {
35    '[class]': 'computedClass()',
36  },
37})
38export class UbBadgeDirective {
39  readonly class = input<string>()
40  readonly variant = input<UbBadgeVariant>('default')
41 
42  protected computedClass = computed(() =>
43    cn(badgeVariants({ variant: this.variant(), class: this.class() })),
44  )
45}