53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
export type CustomWorldWorkFilter = 'all' | 'draft' | 'published';
|
|
|
|
const FILTER_OPTIONS: Array<{
|
|
id: CustomWorldWorkFilter;
|
|
label: string;
|
|
}> = [
|
|
{ id: 'all', label: '全部' },
|
|
{ id: 'draft', label: '草稿' },
|
|
{ id: 'published', label: '已发布' },
|
|
];
|
|
|
|
type CustomWorldWorkTabsProps = {
|
|
activeFilter: CustomWorldWorkFilter;
|
|
draftCount: number;
|
|
publishedCount: number;
|
|
onChange: (filter: CustomWorldWorkFilter) => void;
|
|
};
|
|
|
|
export function CustomWorldWorkTabs({
|
|
activeFilter,
|
|
draftCount,
|
|
publishedCount,
|
|
onChange,
|
|
}: CustomWorldWorkTabsProps) {
|
|
return (
|
|
<div className="platform-remap-surface flex items-center gap-2 overflow-x-auto pb-1">
|
|
{FILTER_OPTIONS.map((option) => {
|
|
const count =
|
|
option.id === 'draft'
|
|
? draftCount
|
|
: option.id === 'published'
|
|
? publishedCount
|
|
: draftCount + publishedCount;
|
|
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
onClick={() => onChange(option.id)}
|
|
className={`shrink-0 rounded-full border px-4 py-2 text-sm transition ${
|
|
activeFilter === option.id
|
|
? 'border-sky-300/20 bg-sky-500/10 text-sky-100'
|
|
: 'border-white/10 bg-black/18 text-zinc-300 hover:text-white'
|
|
}`}
|
|
>
|
|
{option.label} {count}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|