28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
import { cn } from '../utils/cn.ts';
|
|
|
|
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?: 'default' | 'accent' | 'danger' | 'warning' | 'success' | 'muted';
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Badge({ variant = 'default', className, children, ...props }: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center rounded-[5px] border px-1.5 py-px text-[8px] font-extrabold leading-none tracking-wide',
|
|
variant === 'default' && 'border-white/8 bg-wing-muted/22 text-white',
|
|
variant === 'accent' && 'border-wing-accent/70 bg-wing-accent/22 text-white',
|
|
variant === 'danger' && 'border-wing-danger/70 bg-wing-danger/22 text-white',
|
|
variant === 'warning' && 'border-wing-warning/70 bg-wing-warning/22 text-white',
|
|
variant === 'success' && 'border-wing-success/70 bg-wing-success/22 text-white',
|
|
variant === 'muted' && 'border-wing-border/90 bg-wing-card/55 text-wing-muted font-bold',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|