51 lines
1.3 KiB
TypeScript
51 lines
1.3 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 scrollbar-hide xl:pb-0">
|
|
{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={`platform-tab shrink-0 px-4 py-2 text-sm xl:px-4 xl:py-1.5 xl:text-xs ${
|
|
activeFilter === option.id ? 'platform-tab--active' : ''
|
|
}`}
|
|
>
|
|
{option.label} {count}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|