Informational and text templates

app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx

@@ -5,11 +5,12 @@ import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
-  ({ secondButton, progressBar = true, className = "" }) => {
+  ({ secondButton, progressBar = true, onBackClick, className = "" }) => {
     return (
       <CreateFlowFooterView
         secondButton={secondButton}
         progressBar={progressBar}
+        onBackClick={onBackClick}
         className={className}
       />
     );

app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts

@@ -13,6 +13,10 @@ export interface CreateFlowFooterProps {
    * @default true
    */
   progressBar?: boolean;
+  /**
+   * Callback function for Back button click
+   */
+  onBackClick?: () => void;
   /**
    * Additional CSS classes
    */

app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx

@@ -5,11 +5,12 @@ import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 export function CreateFlowFooterView({
   secondButton,
   progressBar = true,
+  onBackClick,
   className = "",
 }: CreateFlowFooterProps) {
   return (
     <footer
-      className={`sticky bottom-0 z-50 bg-black w-full ${className}`}
+      className={`bg-black w-full ${className}`}
       role="contentinfo"
       aria-label="Create Flow Footer"
     >
@@ -28,6 +29,8 @@ export function CreateFlowFooterView({
           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)]"
+          onClick={onBackClick}
+          disabled={!onBackClick}
         >
           Back
         </Button>