57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { CreateFlowHeaderLockup } from "./CreateFlowHeaderLockup";
|
|
import { CreateFlowStepShell } from "./CreateFlowStepShell";
|
|
import {
|
|
CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
|
|
CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
|
|
CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
|
|
CREATE_FLOW_WIDE_MAX_CLASS,
|
|
} from "./createFlowLayoutTokens";
|
|
|
|
type CreateFlowCardStackStepShellProps = {
|
|
lockupTitle: string;
|
|
lockupDescription?: ReactNode;
|
|
/** When true, the stack region exposes `aria-busy` while recommendations load. */
|
|
stackBusy?: boolean;
|
|
children: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* Centered lockup + card-stack layout shared by communication, membership, and
|
|
* conflict-management steps (Figma compact card stack).
|
|
*/
|
|
export function CreateFlowCardStackStepShell({
|
|
lockupTitle,
|
|
lockupDescription,
|
|
stackBusy = false,
|
|
children,
|
|
}: CreateFlowCardStackStepShellProps) {
|
|
return (
|
|
<CreateFlowStepShell
|
|
variant="wideGridLoosePadding"
|
|
contentTopBelowMd="space-800"
|
|
className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
|
|
>
|
|
<div
|
|
className={`flex w-full min-w-0 flex-col items-center gap-6 ${CREATE_FLOW_WIDE_MAX_CLASS}`}
|
|
>
|
|
<div className={CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}>
|
|
<CreateFlowHeaderLockup
|
|
title={lockupTitle}
|
|
description={lockupDescription}
|
|
justification="center"
|
|
/>
|
|
</div>
|
|
<div
|
|
className={CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS}
|
|
aria-busy={stackBusy}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</CreateFlowStepShell>
|
|
);
|
|
}
|