45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
||
|
|
|
||
|
|
export interface BadgeProps {
|
||
|
|
variant?: BadgeVariant;
|
||
|
|
children: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
dot?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const variantClasses: Record<BadgeVariant, string> = {
|
||
|
|
default: 'bg-secondary-100 text-secondary-700',
|
||
|
|
primary: 'bg-primary-100 text-primary-700',
|
||
|
|
success: 'bg-success-100 text-success-700',
|
||
|
|
warning: 'bg-warning-100 text-warning-700',
|
||
|
|
danger: 'bg-danger-100 text-danger-700',
|
||
|
|
info: 'bg-accent-100 text-accent-700',
|
||
|
|
};
|
||
|
|
|
||
|
|
const dotColors: Record<BadgeVariant, string> = {
|
||
|
|
default: 'bg-secondary-400',
|
||
|
|
primary: 'bg-primary-500',
|
||
|
|
success: 'bg-success-500',
|
||
|
|
warning: 'bg-warning-500',
|
||
|
|
danger: 'bg-danger-500',
|
||
|
|
info: 'bg-accent-500',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Badge({ variant = 'default', children, className, dot = false }: BadgeProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={clsx(
|
||
|
|
'inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium',
|
||
|
|
variantClasses[variant],
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{dot && <span className={clsx('w-1.5 h-1.5 rounded-full', dotColors[variant])} aria-hidden="true" />}
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|