58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import ProportionBar from "../../progress/ProportionBar";
|
|
import Button from "../../buttons/Button";
|
|
import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
|
|
import {
|
|
CREATE_FLOW_FOOTER_SCRIM_CLASS,
|
|
CREATE_FLOW_PAGE_GUTTER_CLASS,
|
|
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
|
} from "../../../(app)/create/components/createFlowLayoutTokens";
|
|
|
|
export function CreateFlowFooterView({
|
|
secondButton,
|
|
progressBar = true,
|
|
proportionBarProgress = "1-0",
|
|
proportionBarVariant: proportionBarVariantProp,
|
|
onBackClick,
|
|
className = "",
|
|
contentMaxClass = CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
|
footerAriaLabel,
|
|
}: CreateFlowFooterProps) {
|
|
const proportionBarVariant = proportionBarVariantProp ?? "default";
|
|
return (
|
|
<footer
|
|
className={`relative bg-black w-full pb-[env(safe-area-inset-bottom,0px)] ${className}`}
|
|
role="contentinfo"
|
|
aria-label={footerAriaLabel}
|
|
>
|
|
<div className={CREATE_FLOW_FOOTER_SCRIM_CLASS} aria-hidden />
|
|
<div className={CREATE_FLOW_PAGE_GUTTER_CLASS}>
|
|
<div className={`mx-auto w-full ${contentMaxClass}`}>
|
|
{progressBar && (
|
|
<div className="pt-[var(--spacing-measures-spacing-300,12px)]">
|
|
<ProportionBar
|
|
progress={proportionBarProgress}
|
|
variant={proportionBarVariant}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
|
|
<Button
|
|
buttonType="ghost"
|
|
palette="default"
|
|
size="xsmall"
|
|
className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
|
|
onClick={onBackClick}
|
|
disabled={!onBackClick}
|
|
>
|
|
Back
|
|
</Button>
|
|
|
|
{secondButton && <div className="flex-shrink-0">{secondButton}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|