20 lines
1.2 KiB
TypeScript
20 lines
1.2 KiB
TypeScript
import { ReactNode } from 'react'
|
|
type Variant = 'default' | 'success' | 'warning' | 'danger' | 'info'
|
|
// 兼容旧 API: blue→info, green→success, gray→default, red→danger, yellow→warning
|
|
type LegacyColor = 'blue' | 'green' | 'gray' | 'red' | 'yellow'
|
|
const legacyMap: Record<LegacyColor, Variant> = {
|
|
blue: 'info', green: 'success', gray: 'default', red: 'danger', yellow: 'warning',
|
|
}
|
|
interface BadgeProps { children: ReactNode; variant?: Variant; color?: LegacyColor }
|
|
const vs: Record<Variant, string> = {
|
|
default: 'bg-slate-100 dark:bg-slate-800 dark:text-slate-300 text-slate-700',
|
|
success: 'bg-emerald-100 dark:bg-emerald-500/10 dark:text-emerald-400 text-emerald-700',
|
|
warning: 'bg-amber-100 dark:bg-amber-500/10 dark:text-amber-400 text-amber-700',
|
|
danger: 'bg-red-100 dark:bg-red-500/10 dark:text-red-400 text-red-700',
|
|
info: 'bg-blue-100 dark:bg-blue-500/10 dark:text-blue-400 text-blue-700',
|
|
}
|
|
export default function Badge({ children, variant = 'default', color }: BadgeProps) {
|
|
const v = color ? vs[legacyMap[color]] : vs[variant]
|
|
return <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${v}`}>{children}</span>
|
|
}
|