init with react+axum+spacetimedb

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

@@ -0,0 +1,94 @@
+import { ArrowRight } from 'lucide-react';
+
+import {
+  PLATFORM_CREATION_TYPES,
+  type PlatformCreationTypeId,
+} from '../platform-entry/platformEntryCreationTypes';
+
+type CustomWorldCreationStartCardProps = {
+  busy?: boolean;
+  error?: string | null;
+  onCreateType: (type: PlatformCreationTypeId) => void;
+};
+
+export function CustomWorldCreationStartCard({
+  busy = false,
+  error = null,
+  onCreateType,
+}: CustomWorldCreationStartCardProps) {
+  return (
+    // 移动端限制模块高度，模板入口改为横向滚动，避免挤占作品列表首屏空间。
+    <div className="platform-surface platform-surface--hero relative max-h-[33svh] overflow-hidden px-3 py-3 sm:max-h-none sm:px-5 sm:py-5 xl:px-5 xl:py-4">
+      <div className="absolute inset-0 bg-[var(--platform-hero-overlay-strong)]" />
+      <div className="relative z-10 space-y-2.5 sm:space-y-4 xl:space-y-3">
+        <div className="flex items-center justify-between gap-3 xl:items-end">
+          <div className="text-xl font-black leading-none text-white sm:text-3xl xl:text-2xl">
+            新建作品
+          </div>
+          <div className="hidden text-sm leading-6 text-zinc-200/88 sm:block xl:text-xs xl:leading-5">
+            直接选择游戏创作模板，立刻进入对应的共创工作台。
+          </div>
+          <span className="platform-pill platform-pill--neutral shrink-0 border-white/25 bg-white/14 px-2.5 text-xs text-white sm:hidden">
+            {busy ? '正在开启' : '选择模板'}
+          </span>
+        </div>
+
+        <div className="-mx-1 flex snap-x gap-2 overflow-x-auto px-1 pb-1 sm:mx-0 sm:grid sm:gap-3 sm:overflow-visible sm:px-0 sm:pb-0 sm:grid-cols-2 xl:grid-cols-5 xl:gap-2.5">
+          {PLATFORM_CREATION_TYPES.map((item) => {
+            const disabled = item.locked || busy;
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                disabled={disabled}
+                onClick={() => {
+                  onCreateType(item.id);
+                }}
+                className={`platform-interactive-card relative min-h-[4rem] w-[11.25rem] shrink-0 snap-start overflow-hidden rounded-[1.15rem] border px-3 py-2.5 text-left transition sm:min-h-[8.5rem] sm:w-auto sm:rounded-[1.5rem] sm:px-4 sm:py-4 xl:min-h-[6.4rem] xl:px-3.5 xl:py-3 ${
+                  item.locked
+                    ? 'cursor-not-allowed border-white/10 bg-white/8 text-zinc-300/70'
+                    : 'border-white/18 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.24),transparent_36%),linear-gradient(135deg,rgba(255,255,255,0.18),rgba(255,255,255,0.08))] text-white'
+                } ${busy && !item.locked ? 'opacity-70' : ''}`}
+              >
+                <div className="flex items-center justify-between gap-2 sm:items-start sm:gap-3">
+                  <span
+                    className={`platform-pill px-2.5 text-xs sm:px-3 sm:text-sm ${
+                      item.locked
+                        ? 'platform-pill--neutral text-[var(--platform-text-soft)]'
+                        : 'platform-pill--neutral border-white/30 bg-white/18 text-white'
+                    }`}
+                  >
+                    {item.locked ? item.badge : busy ? '正在开启' : item.badge}
+                  </span>
+                  {item.locked ? (
+                    <span className="text-base leading-none text-white/40">·</span>
+                  ) : (
+                    <ArrowRight className="h-4 w-4 text-white/80" />
+                  )}
+                </div>
+
+                <div className="mt-2.5 truncate text-base font-black leading-tight text-inherit sm:mt-7 sm:text-lg xl:mt-4 xl:text-base">
+                  {item.title}
+                </div>
+                <div
+                  className={`mt-1 truncate text-xs sm:mt-2 sm:text-sm xl:mt-1 xl:text-xs ${
+                    item.locked ? 'text-zinc-400' : 'text-zinc-200/82'
+                  }`}
+                >
+                  {item.subtitle}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {error ? (
+          <div className="platform-banner platform-banner--danger rounded-[1rem] px-3 py-2 text-sm leading-5 sm:rounded-[1.25rem] sm:leading-6">
+            {error}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}