Implement create flow topnav and footer

2026-02-07 22:42:30 -07:00
parent 343b96a9bb
commit e6c1002dbb
10 changed files with 319 additions and 4 deletions
@@ -0,0 +1,21 @@
+"use client";
+
+import { memo } from "react";
+import { CreateFlowFooterView } from "./CreateFlowFooter.view";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
+  ({ secondButton, progressBar = true, className = "" }) => {
+    return (
+      <CreateFlowFooterView
+        secondButton={secondButton}
+        progressBar={progressBar}
+        className={className}
+      />
+    );
+  },
+);
+
+CreateFlowFooterContainer.displayName = "CreateFlowFooter";
+
+export default CreateFlowFooterContainer;
@@ -0,0 +1,20 @@
+/**
+ * Type definitions for CreateFlowFooter component
+ *
+ * Footer component for the create rule flow with progress bar and buttons.
+ */
+export interface CreateFlowFooterProps {
+  /**
+   * The second button (typically "Next" button) to display on the right side
+   */
+  secondButton?: React.ReactNode;
+  /**
+   * Whether to show the progress bar
+   * @default true
+   */
+  progressBar?: boolean;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
@@ -0,0 +1,42 @@
+import ProportionBar from "../../progress/ProportionBar";
+import Button from "../../buttons/Button";
+import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
+
+export function CreateFlowFooterView({
+  secondButton,
+  progressBar = true,
+  className = "",
+}: CreateFlowFooterProps) {
+  return (
+    <footer
+      className={`sticky bottom-0 z-50 bg-black w-full ${className}`}
+      role="contentinfo"
+      aria-label="Create Flow Footer"
+    >
+      {/* Progress Bar - Top */}
+      {progressBar && (
+        <div className="px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] pt-[var(--spacing-measures-spacing-300,12px)]">
+          <ProportionBar progress="1-0" />
+        </div>
+      )}
+
+      {/* Buttons Container */}
+      <div className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[var(--spacing-measures-spacing-1200,48px)] py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
+        {/* Back Button - Left */}
+        <Button
+          buttonType="ghost"
+          palette="default"
+          size="xsmall"
+          className="md:!text-[14px] md:!leading-[16px] !text-[12px] !leading-[14px] !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)]"
+        >
+          Back
+        </Button>
+
+        {/* Second Button - Right */}
+        {secondButton && (
+          <div className="flex-shrink-0">{secondButton}</div>
+        )}
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./CreateFlowFooter.container";
+export type { CreateFlowFooterProps } from "./CreateFlowFooter.types";