init with react+axum+spacetimedb

src/components/custom-world-home/CustomWorldWorkTabs.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+}