0099b23a86
- Fraunces 衬线 display + DM Sans body + JetBrains Mono 数字标签 - 暖米白主题（#f7f4ee）+ 蓝色强调色（#2563eb） - 引入 lucide-react 图标库替代 emoji - Sidebar 加入编号索引、Logo、用户区域、杂志风分组标题 - 产品列表页加入大号 display 标题、搜索、卡片悬浮动画 - 产品详情页面包屑、tab 编号、需求表格重做 - 状态徽章改为色点 + 文字，"已拒绝"用红色避免与"评审中"冲突 - 全局加入 grain 噪点纹理、入场交错动画 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { RequirementStatus } from '@ftb/shared';
|
|
import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
|
|
|
|
interface Props {
|
|
status: RequirementStatus;
|
|
}
|
|
|
|
const STATUS_STYLES: Record<RequirementStatus, { bg: string; text: string; dot: string }> = {
|
|
[RequirementStatus.DRAFT]: {
|
|
bg: 'bg-[var(--line-soft)]',
|
|
text: 'text-[var(--ink-soft)]',
|
|
dot: 'bg-[var(--ink-muted)]',
|
|
},
|
|
[RequirementStatus.REVIEWING]: {
|
|
bg: 'bg-blue-50',
|
|
text: 'text-blue-700',
|
|
dot: 'bg-blue-500',
|
|
},
|
|
[RequirementStatus.APPROVED]: {
|
|
bg: 'bg-emerald-50',
|
|
text: 'text-emerald-700',
|
|
dot: 'bg-emerald-500',
|
|
},
|
|
[RequirementStatus.REJECTED]: {
|
|
bg: 'bg-red-50',
|
|
text: 'text-red-700',
|
|
dot: 'bg-red-500',
|
|
},
|
|
[RequirementStatus.DELIVERED]: {
|
|
bg: 'bg-purple-50',
|
|
text: 'text-purple-700',
|
|
dot: 'bg-purple-500',
|
|
},
|
|
};
|
|
|
|
export function RequirementStatusBadge({ status }: Props) {
|
|
const style = STATUS_STYLES[status];
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
|
|
>
|
|
<span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
|
|
{REQUIREMENT_STATUS_LABEL[status]}
|
|
</span>
|
|
);
|
|
}
|