padreug
0923731ee9
- Add animated ping effect to ConnectionStatus badge - Update Badge variants with more subtle color schemes - Implement success variant for online/offline states - Reduce text size and improve visual hierarchy - Use rounded-full badge design for better aesthetics
27 lines
989 B
TypeScript
27 lines
989 B
TypeScript
import { cva, type VariantProps } from 'class-variance-authority'
|
|
|
|
export { default as Badge } from './Badge.vue'
|
|
|
|
export const badgeVariants = cva(
|
|
'inline-flex items-center whitespace-nowrap rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
'border-transparent bg-primary/10 text-primary hover:bg-primary/20',
|
|
secondary:
|
|
'border-transparent bg-secondary/10 text-secondary-foreground hover:bg-secondary/20',
|
|
destructive:
|
|
'border-transparent bg-destructive/10 text-destructive hover:bg-destructive/20',
|
|
success:
|
|
'border-transparent bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
|
outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
},
|
|
)
|
|
|
|
export type BadgeVariants = VariantProps<typeof badgeVariants>
|