59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
variant?: 'success' | 'warning' | 'error' | 'danger' | 'info' | 'neutral' | 'accent';
|
|
size?: 'sm' | 'md';
|
|
dot?: boolean;
|
|
}
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
success:
|
|
'bg-[var(--bl-success-muted,var(--bl-surface-muted))] text-[var(--bl-success)] border-[var(--bl-success-border,var(--bl-success))]',
|
|
warning:
|
|
'bg-[var(--bl-warning-muted,var(--bl-surface-muted))] text-[var(--bl-warning)] border-[var(--bl-warning-border,var(--bl-warning))]',
|
|
error:
|
|
'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)] border-[var(--bl-danger-border,var(--bl-danger))]',
|
|
danger:
|
|
'bg-[var(--bl-danger-muted,var(--bl-surface-muted))] text-[var(--bl-danger)] border-[var(--bl-danger-border,var(--bl-danger))]',
|
|
info: 'bg-[var(--bl-info-muted,var(--bl-surface-muted))] text-[var(--bl-info,var(--bl-accent))] border-[var(--bl-info-border,var(--bl-info,var(--bl-accent)))]',
|
|
neutral:
|
|
'bg-[var(--bl-surface-muted,#252540)] text-[var(--bl-text-secondary,#a0a0b0)] border-[var(--bl-border,#2a2a4a)]',
|
|
accent:
|
|
'bg-[var(--bl-accent-muted,var(--bl-surface-muted))] text-[var(--bl-text-primary)] border-[var(--bl-accent)]',
|
|
};
|
|
|
|
const dotColors: Record<string, string> = {
|
|
success: 'bg-[var(--bl-success)]',
|
|
error: 'bg-[var(--bl-danger)]',
|
|
danger: 'bg-[var(--bl-danger)]',
|
|
warning: 'bg-[var(--bl-warning)]',
|
|
info: 'bg-[var(--bl-info,var(--bl-accent))]',
|
|
neutral: 'bg-[var(--bl-text-tertiary,var(--bl-text-secondary))]',
|
|
accent: 'bg-[var(--bl-accent)]',
|
|
};
|
|
|
|
export function Badge({
|
|
variant = 'neutral',
|
|
size = 'sm',
|
|
dot,
|
|
className,
|
|
children,
|
|
...props
|
|
}: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'inline-flex items-center gap-1.5 rounded-full border font-medium',
|
|
size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-3 py-1 text-sm',
|
|
variantStyles[variant],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{dot && <span className={clsx('h-1.5 w-1.5 rounded-full', dotColors[variant])} />}
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|