shangfangjian
2cfc9ccc0f
- 新建 components/ui/(Button/Input/Select/Modal/Tabs/Spinner/Skeleton 等),变体用联合类型约束,根治幻影变体 - admin/components.tsx 与 matches/ui.tsx 改为再导出壳,消除 Spinner 三份重复 - 日期工具收口到 lib/date.ts,滚动监听收口到 lib/useScroll.ts - index.css 引入 :root RGB 三元组令牌,tailwind.config 接 <alpha-value>(修复透明度修饰符静默失效) - 刘建毛草 5MB 全字库(jsDelivr 未锁版) → 1KB 自托管子集(仅「先知」二字,unicode-range 限定)
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
/**
|
|
* 状态标记 Badge。
|
|
*
|
|
* 报刊不用彩色药丸:小方块 + 文字,红=异常/失败,墨=正常,灰=中性。
|
|
* 原位于 admin/components.tsx。
|
|
*/
|
|
import type { ReactNode } from 'react'
|
|
|
|
const MARK_STYLES: Record<string, { text: string; mark: string }> = {
|
|
success: { text: 'text-ink-800', mark: 'bg-ink-900' },
|
|
completed: { text: 'text-ink-800', mark: 'bg-ink-900' },
|
|
win: { text: 'text-ink-800', mark: 'bg-ink-900' },
|
|
ok: { text: 'text-ink-800', mark: 'bg-ink-900' },
|
|
running: { text: 'text-ink-600', mark: 'bg-ink-400' },
|
|
info: { text: 'text-ink-600', mark: 'bg-ink-400' },
|
|
queued: { text: 'text-ink-500', mark: 'border border-ink-400' },
|
|
pending: { text: 'text-ink-400', mark: 'bg-ink-300' },
|
|
push: { text: 'text-ink-400', mark: 'bg-ink-300' },
|
|
warning: { text: 'text-press', mark: 'border border-press' },
|
|
failed: { text: 'text-press font-medium', mark: 'bg-press' },
|
|
error: { text: 'text-press font-medium', mark: 'bg-press' },
|
|
loss: { text: 'text-press font-medium', mark: 'bg-press' },
|
|
}
|
|
|
|
export function Badge({
|
|
status,
|
|
children,
|
|
}: {
|
|
status: string
|
|
children: ReactNode
|
|
}) {
|
|
const s = MARK_STYLES[status] ?? MARK_STYLES.pending
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 whitespace-nowrap text-2xs ${s.text}`}>
|
|
<span className={`inline-block h-1.5 w-1.5 ${s.mark}`} aria-hidden="true" />
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|