97 lines
4.4 KiB
TypeScript
97 lines
4.4 KiB
TypeScript
import { ArrowRight } from 'lucide-react';
|
||
|
||
import {
|
||
getVisiblePlatformCreationTypes,
|
||
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) {
|
||
// 创作首页首屏卡带与创作类型弹层保持同一份展示口径，
|
||
// 避免某个玩法只在其中一个入口被隐藏而出现状态漂移。
|
||
const visibleCreationTypes = getVisiblePlatformCreationTypes();
|
||
|
||
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 scrollbar-hide 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">
|
||
{visibleCreationTypes.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 flex min-h-[4rem] w-[11.25rem] shrink-0 snap-start flex-col 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 min-h-5 items-center justify-end gap-2 sm:items-start sm:gap-3">
|
||
{item.locked ? (
|
||
<span className="platform-pill platform-pill--neutral px-2.5 text-xs text-[var(--platform-text-soft)] sm:px-3 sm:text-sm">
|
||
{item.badge}
|
||
</span>
|
||
) : null}
|
||
{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-auto pt-1.5 sm:pt-4 xl:pt-2">
|
||
<div className="truncate text-base font-black leading-tight text-inherit sm:text-lg 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>
|
||
</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>
|
||
);
|
||
}
|