52 lines
1021 B
TypeScript
52 lines
1021 B
TypeScript
/**
|
||
* Badge 组件
|
||
*
|
||
* 统一的徽章组件，遵循三层架构设计
|
||
* 用于显示状态、标签等短文本信息
|
||
* 支持多种变体（primary、success、warning、danger）和尺寸（sm、md、lg）
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode } from 'react'
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
|
||
interface BadgeProps {
|
||
children: ReactNode
|
||
variant?: 'primary' | 'success' | 'warning' | 'danger'
|
||
size?: 'sm' | 'md' | 'lg'
|
||
className?: string
|
||
}
|
||
|
||
export default function Badge({
|
||
children,
|
||
variant = 'primary',
|
||
size = 'md',
|
||
className = '',
|
||
}: BadgeProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
const sizeClasses = {
|
||
sm: 'px-2 py-0.5 text-xs',
|
||
md: 'px-2 py-1 text-xs',
|
||
lg: 'px-3 py-1.5 text-sm',
|
||
}
|
||
|
||
return (
|
||
<span
|
||
className={cn(
|
||
styles.badgeStyles[variant],
|
||
sizeClasses[size],
|
||
'inline-flex items-center font-medium rounded',
|
||
className
|
||
)}
|
||
>
|
||
{children}
|
||
</span>
|
||
)
|
||
}
|
||
|