67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { type HTMLAttributes, forwardRef } from 'react'
|
|
import type { AccountStatus } from '../../types'
|
|
|
|
export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
status: AccountStatus | 'active' | 'inactive' | 'error'
|
|
size?: 'sm' | 'md'
|
|
}
|
|
|
|
const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(
|
|
({ className = '', status, size = 'md', ...props }, ref) => {
|
|
const getStatusConfig = (status: string) => {
|
|
const configs: Record<string, { label: string; color: string }> = {
|
|
pending: {
|
|
label: '待检查',
|
|
color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
|
|
},
|
|
checking: {
|
|
label: '检查中',
|
|
color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
|
},
|
|
active: {
|
|
label: '正常',
|
|
color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
|
|
},
|
|
banned: {
|
|
label: '封禁',
|
|
color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
|
|
},
|
|
token_expired: {
|
|
label: '过期',
|
|
color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
|
|
},
|
|
error: {
|
|
label: '错误',
|
|
color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
|
|
},
|
|
inactive: {
|
|
label: '停用',
|
|
color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
|
|
},
|
|
}
|
|
return configs[status] || configs.error
|
|
}
|
|
|
|
const config = getStatusConfig(status)
|
|
|
|
const sizeStyles = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-2.5 py-1 text-xs',
|
|
}
|
|
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
className={`inline-flex items-center font-medium rounded-full ${config.color} ${sizeStyles[size]} ${className}`}
|
|
{...props}
|
|
>
|
|
{config.label}
|
|
</span>
|
|
)
|
|
}
|
|
)
|
|
|
|
StatusBadge.displayName = 'StatusBadge'
|
|
|
|
export default StatusBadge
|