a604b4d488
Some checks failed
CI Check / check (push) Has been cancelled
- 首页UI统一到三层架构 - 将所有 gray 系列替换为 slate 系列 - 统一按钮、输入框、边框颜色样式 - 使用 useThemeStyles() Hook - 创建通用组件库 - Badge 组件（支持 primary、success、warning、danger 变体） - Tag 组件（支持多种颜色，已在首页应用） - Button 组件（支持多种变体和尺寸，带加载状态） - Input 组件（支持错误状态和多种尺寸）
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { ReactNode } from 'react'
|
|
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
|
|
|
interface TagProps {
|
|
children: ReactNode
|
|
color?: 'blue' | 'green' | 'orange' | 'purple' | 'indigo' | 'pink' | 'cyan'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
className?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
export default function Tag({
|
|
children,
|
|
color = 'blue',
|
|
size = 'md',
|
|
className = '',
|
|
onClick,
|
|
}: TagProps) {
|
|
const styles = useThemeStyles()
|
|
|
|
const colorClasses = {
|
|
blue: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
|
green: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
|
orange: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
|
purple: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
|
indigo: 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300',
|
|
pink: 'bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300',
|
|
cyan: 'bg-cyan-100 dark:bg-cyan-900/30 text-cyan-700 dark:text-cyan-300',
|
|
}
|
|
|
|
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',
|
|
}
|
|
|
|
const baseClasses = 'inline-flex items-center font-medium rounded transition-colors'
|
|
|
|
return (
|
|
<span
|
|
className={cn(
|
|
baseClasses,
|
|
colorClasses[color],
|
|
sizeClasses[size],
|
|
onClick && 'cursor-pointer hover:opacity-80',
|
|
className
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|
|
|