48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* ProBadge 组件
|
|
*
|
|
* 用于标识受限功能的小徽章
|
|
* 支持 small、medium、large 三种尺寸
|
|
*/
|
|
|
|
import { useTheme, cn } from '@/lib/ui-styles'
|
|
|
|
export type ProBadgeSize = 'xs' | 'small' | 'medium' | 'large'
|
|
|
|
interface ProBadgeProps {
|
|
/** 徽章尺寸 */
|
|
size?: ProBadgeSize
|
|
/** 自定义类名 */
|
|
className?: string
|
|
}
|
|
|
|
const sizeStyles: Record<ProBadgeSize, string> = {
|
|
xs: 'text-[8px] px-1 py-0.5',
|
|
small: 'text-[10px] px-1.5 py-0.5',
|
|
medium: 'text-xs px-2 py-0.5',
|
|
large: 'text-sm px-2.5 py-1',
|
|
}
|
|
|
|
export default function ProBadge({ size = 'small', className }: ProBadgeProps) {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center justify-center font-semibold rounded-full',
|
|
'border border-slate-300 bg-slate-100 text-slate-700',
|
|
theme === 'dark' && 'border-slate-700 bg-slate-800 text-slate-200',
|
|
'shadow-sm',
|
|
sizeStyles[size],
|
|
className
|
|
)}
|
|
data-testid="pro-badge"
|
|
data-size={size}
|
|
>
|
|
PRO
|
|
</span>
|
|
)
|
|
}
|