76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { ArrowLeft } from 'lucide-react';
|
|
import type { ReactNode } from 'react';
|
|
|
|
import type { UnifiedCreationSpec } from './unifiedCreationSpecs';
|
|
|
|
type UnifiedCreationPageProps = {
|
|
spec: UnifiedCreationSpec;
|
|
children: ReactNode;
|
|
onBack?: () => void;
|
|
isBackDisabled?: boolean;
|
|
};
|
|
|
|
export function UnifiedCreationPage({
|
|
spec,
|
|
children,
|
|
onBack,
|
|
isBackDisabled = false,
|
|
}: UnifiedCreationPageProps) {
|
|
return (
|
|
<div
|
|
className="unified-creation-page platform-remap-surface mx-auto flex h-full min-h-0 w-full max-w-5xl flex-col overflow-y-auto overflow-x-hidden px-3 pt-2 sm:px-4 sm:pt-3"
|
|
data-play-id={spec.playId}
|
|
data-field-kinds={spec.fields.map((field) => field.kind).join(',')}
|
|
data-workspace-stage={spec.workspaceStage}
|
|
data-generation-stage={spec.generationStage}
|
|
data-result-stage={spec.resultStage}
|
|
>
|
|
<header className="unified-creation-page__header shrink-0 pb-3">
|
|
<div className="mb-2 flex items-center gap-3">
|
|
{onBack ? (
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
disabled={isBackDisabled}
|
|
className={`platform-button platform-button--ghost min-h-0 shrink-0 px-3 py-1.5 text-[11px] ${
|
|
isBackDisabled ? 'cursor-not-allowed opacity-45' : ''
|
|
}`}
|
|
>
|
|
<ArrowLeft className="h-3.5 w-3.5" />
|
|
返回
|
|
</button>
|
|
) : (
|
|
<span aria-hidden="true" className="min-h-8 w-0 shrink-0" />
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h1 className="m-0 min-w-0 truncate text-[1.35rem] font-black leading-tight tracking-normal text-[var(--platform-text-strong)] sm:text-[1.65rem]">
|
|
{spec.title}
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<div className="sr-only" data-testid="unified-creation-spec">
|
|
<h1>{spec.title}</h1>
|
|
<ul>
|
|
{spec.fields.map((field) => (
|
|
<li
|
|
key={field.id}
|
|
data-testid="unified-creation-field"
|
|
data-field-id={field.id}
|
|
data-field-kind={field.kind}
|
|
data-required={field.required ? 'true' : 'false'}
|
|
>
|
|
{field.label}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="unified-creation-page__content flex min-h-max flex-col pb-3 sm:pb-4">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UnifiedCreationPage;
|