60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "./createFlowLayoutTokens";
|
|
|
|
export type CreateFlowStepShellVariant =
|
|
| "centeredNarrow"
|
|
| "centeredNarrowBottomPad"
|
|
| "wideGrid"
|
|
| "wideGridLoosePadding"
|
|
| "bare";
|
|
|
|
/** Semantic top padding below create-flow top nav (applied at all breakpoints; name is legacy). */
|
|
export type CreateFlowContentTopBelowMd = "none" | "space-1400" | "space-800";
|
|
|
|
const outerByVariant: Record<CreateFlowStepShellVariant, string> = {
|
|
centeredNarrow: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
|
|
centeredNarrowBottomPad: `flex w-full min-w-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS} pb-28 md:pb-32`,
|
|
/** Wide two-column steps; inner content supplies the 1328px cap. */
|
|
wideGrid: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
|
|
/** Create Community review + card grid; inner content supplies the 1440px cap. */
|
|
wideGridLoosePadding: `flex w-full min-w-0 shrink-0 flex-col items-center ${CREATE_FLOW_PAGE_GUTTER_CLASS}`,
|
|
bare: "w-full min-w-0",
|
|
};
|
|
|
|
const contentTopBelowMdClass: Record<CreateFlowContentTopBelowMd, string> = {
|
|
none: "",
|
|
"space-1400": "pt-[var(--space-1400)]",
|
|
"space-800": "pt-[var(--space-800)]",
|
|
};
|
|
|
|
interface CreateFlowStepShellProps {
|
|
children: ReactNode;
|
|
variant?: CreateFlowStepShellVariant;
|
|
/** Top spacing below top chrome (`CreateFlowTextFieldScreen` defaults to `space-1400`). */
|
|
contentTopBelowMd?: CreateFlowContentTopBelowMd;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Shared horizontal padding and width constraints for create-flow step pages.
|
|
* Gutters come from {@link CREATE_FLOW_PAGE_GUTTER_CLASS} (`md` / `lg` track
|
|
* `--breakpoint-md` and `--breakpoint-lg` in `app/tailwind.css`).
|
|
*/
|
|
export function CreateFlowStepShell({
|
|
children,
|
|
variant = "centeredNarrow",
|
|
contentTopBelowMd = "none",
|
|
className = "",
|
|
}: CreateFlowStepShellProps) {
|
|
const topClass = contentTopBelowMdClass[contentTopBelowMd];
|
|
return (
|
|
<div
|
|
className={`${outerByVariant[variant]} ${topClass} ${className}`.trim()}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|