Badge

1import * as React from 'react';
2import { cva, type VariantProps } from 'class-variance-authority';
3import { cn } from '@/lib/utils';
4 
5const badgeVariants = cva(
6  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
7  {
8    variants: {
9      variant: {
10        default:
11          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
12        secondary:
13          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
14        destructive:
15          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
16        outline: 'text-foreground',
17      },
18      shiny: {
19        true: 'relative overflow-hidden',
20        false: '',
21      },
22    },
23    defaultVariants: {
24      variant: 'default',
25      shiny: false,
26    },
27  },
28);
29 
30export interface BadgeProps
31  extends
32    React.HTMLAttributes<HTMLDivElement>,
33    VariantProps<typeof badgeVariants> {
34  shiny?: boolean;
35  shinySpeed?: number;
36}
37 
38function Badge({
39  className,
40  variant,
41  shiny = false,
42  shinySpeed = 5,
43  children,
44  ...props
45}: BadgeProps) {
46  const animationDuration = `${shinySpeed}s`;
47 
48  return (
49    <div
50      className={cn(badgeVariants({ variant, shiny }), className)}
51      {...props}
52    >
53      <span className={shiny ? 'relative z-10' : ''}>{children}</span>
54 
55      {shiny && (
56        <span
57          className='absolute inset-0 pointer-events-none animate-shine dark:hidden'
58          style={{
59            background:
60              'linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%)',
61            backgroundSize: '200% 100%',
62            animationDuration,
63            mixBlendMode: 'screen',
64          }}
65        />
66      )}
67 
68      {shiny && (
69        <span
70          className='absolute inset-0 pointer-events-none animate-shine hidden dark:block'
71          style={{
72            background:
73              'linear-gradient(120deg, transparent 40%, rgba(0,0,150,0.25) 50%, transparent 60%)',
74            backgroundSize: '200% 100%',
75            animationDuration,
76            mixBlendMode: 'multiply',
77          }}
78        />
79      )}
80    </div>
81  );
82}
83 
84export { Badge, badgeVariants };