61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import * as React from "react"
|
|
import { cva, type VariantProps } from "class-variance-authority"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const badgeVariants = cva(
|
|
"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",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
|
secondary:
|
|
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
destructive:
|
|
"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
|
outline: "text-foreground",
|
|
notification:
|
|
"border-transparent bg-red-500 text-white hover:bg-red-600 absolute -top-1 -right-1 px-1.5 py-0.5 min-w-[1.25rem] h-5 flex items-center justify-center",
|
|
},
|
|
shape: {
|
|
default: "rounded-full",
|
|
pill: "rounded-full",
|
|
square: "rounded-md"
|
|
},
|
|
size: {
|
|
default: "text-xs px-2.5 py-0.5",
|
|
sm: "text-xs px-2 py-0.25 h-3.5 min-w-[1rem]",
|
|
lg: "text-sm px-3 py-1",
|
|
notification: "text-xs px-1.5 py-0.5 h-5 min-w-[1.25rem]"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
shape: "default",
|
|
size: "default"
|
|
},
|
|
}
|
|
)
|
|
|
|
export interface BadgeProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof badgeVariants> {}
|
|
|
|
function Badge({
|
|
className,
|
|
variant,
|
|
shape,
|
|
size,
|
|
...props
|
|
}: BadgeProps) {
|
|
return (
|
|
<div
|
|
className={cn(badgeVariants({ variant, shape, size }), className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Badge, badgeVariants }
|