31 lines
953 B
TypeScript
31 lines
953 B
TypeScript
'use client';
|
|
|
|
import type { CSSProperties } from 'react';
|
|
import type { TaskCategory } from '@/lib/task-category';
|
|
|
|
export function CategoryChip({ category, widthEm }: { category?: TaskCategory; widthEm?: number }) {
|
|
const widthStyle: CSSProperties = widthEm ? { width: `${widthEm}em` } : {};
|
|
if (!category) {
|
|
return (
|
|
<span
|
|
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium text-[var(--ink-muted)]"
|
|
style={widthStyle}
|
|
>
|
|
未分类
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span
|
|
className="inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium"
|
|
style={{
|
|
...widthStyle,
|
|
backgroundColor: category.color ? `${category.color}15` : 'var(--bg-subtle)',
|
|
color: category.color || 'var(--ink-soft)',
|
|
}}
|
|
>
|
|
{category.name}
|
|
</span>
|
|
);
|
|
}
|