src/components/ui/badge.tsx (view raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { cn } from '@/lib/utils' import { type VariantProps, cva } from 'class-variance-authority' import { Hash } from 'lucide-react' import * as React from 'react' const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring focus:ring-ring', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80', outline: 'text-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> { showHash?: boolean } function Badge({ className, variant, showHash = true, ...props }: BadgeProps) { return ( <div className={cn(badgeVariants({ variant }), className)} {...props}> {showHash && <Hash className="size-3 -translate-x-0.5" />} {props.children} </div> ) } export { Badge, badgeVariants } |