|
1
|
import * as React from "react" |
|
2
|
import { cva, type VariantProps } from "class-variance-authority" |
|
3
|
|
|
4
|
import { cn } from "@/lib/utils" |
|
5
|
|
|
6
|
const badgeVariants = cva( |
|
7
|
"inline-flex items-center rounded-full 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", |
|
8
|
{ |
|
9
|
variants: { |
|
10
|
variant: { |
|
11
|
default: |
|
12
|
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80", |
|
13
|
secondary: |
|
14
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", |
|
15
|
destructive: |
|
16
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", |
|
17
|
outline: "text-foreground", |
|
18
|
}, |
|
19
|
}, |
|
20
|
defaultVariants: { |
|
21
|
variant: "default", |
|
22
|
}, |
|
23
|
} |
|
24
|
) |
|
25
|
|
|
26
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> { |
|
27
|
variant?: "default" | "secondary" | "destructive" | "outline" | null; |
|
28
|
children?: React.ReactNode; |
|
29
|
} |
|
30
|
|
|
31
|
function Badge({ className, variant, children, ...props }: BadgeProps) { |
|
32
|
return ( |
|
33
|
<div className={cn(badgeVariants({ variant: variant || "default" }), className)} {...props}> |
|
34
|
{children} |
|
35
|
</div> |
|
36
|
) |
|
37
|
} |
|
38
|
|
|
39
|
export { Badge, badgeVariants } |