42 lines
956 B
TypeScript
42 lines
956 B
TypeScript
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
|
|
export interface BadgeProps {
|
|
variant?: BadgeVariant;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const variantStyles: Record<BadgeVariant, string> = {
|
|
default: 'bg-gray-700 text-gray-300',
|
|
success: 'bg-emerald-500/15 text-emerald-400',
|
|
warning: 'bg-amber-500/15 text-amber-400',
|
|
error: 'bg-red-500/15 text-red-400',
|
|
info: 'bg-blue-500/15 text-blue-400',
|
|
};
|
|
|
|
export const Badge: React.FC<BadgeProps> = ({
|
|
variant = 'default',
|
|
children,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<span
|
|
className={twMerge(
|
|
clsx(
|
|
'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
|
|
variantStyles[variant],
|
|
),
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
Badge.displayName = 'Badge';
|