Badge

1import * as React from 'react'
2import { cva, type VariantProps } from 'class-variance-authority'
3import { cn } from '@/lib/utils'
4 
5const badgeVariants = cva(
6  [
7    'inline-flex items-center gap-1.5',
8    'px-2 py-0.5',
9    'text-[0.65rem] font-mono font-medium uppercase tracking-widest',
10    'border border-solid',
11    'rounded-none',
12    'whitespace-nowrap',
13  ],
14  {
15    variants: {
16      variant: {
17        ACTIVE: [
18          'border-[var(--color-green)]',
19          'text-[var(--color-green)]',
20        ],
21        OFFLINE: [
22          'border-[var(--border)]',
23          'text-[var(--text-muted)]',
24        ],
25        WARNING: [
26          'border-[var(--color-amber)]',
27          'text-[var(--color-amber)]',
28        ],
29        CRITICAL: [
30          'border-[var(--color-red)]',
31          'text-[var(--color-red)]',
32        ],
33        SCANNING: [
34          'border-[var(--color-green)]',
35          'text-[var(--color-green)]',
36        ],
37      },
38    },
39    defaultVariants: {
40      variant: 'ACTIVE',
41    },
42  }
43)
44 
45export interface BadgeProps
46  extends React.HTMLAttributes<HTMLSpanElement>,
47    VariantProps<typeof badgeVariants> {}
48 
49function Badge({ className, variant, children, ...props }: BadgeProps) {
50  const isScanning = variant === 'SCANNING'
51 
52  return (
53    <span
54      className={cn(badgeVariants({ variant }), className)}
55      style={
56        variant === 'ACTIVE'
57          ? { textShadow: 'var(--text-glow-green)', boxShadow: 'inset 0 0 8px #00ed3f11' }
58          : variant === 'CRITICAL'
59            ? { textShadow: 'var(--text-glow-red)', boxShadow: 'inset 0 0 8px #cc220011' }
60            : undefined
61      }
62      {...props}
63    >
64      {isScanning && (
65        <span
66          style={{
67            display: 'inline-block',
68            animation: 'blink-cursor 1s step-end infinite',
69          }}
70        >
71          ●
72        </span>
73      )}
74      {!isScanning && variant === 'ACTIVE'  && <span>●</span>}
75      {!isScanning && variant === 'OFFLINE' && <span>○</span>}
76      {!isScanning && variant === 'WARNING' && <span>⚠</span>}
77      {!isScanning && variant === 'CRITICAL' && <span>✕</span>}
78      {children}
79    </span>
80  )
81}
82 
83export { Badge, badgeVariants }