Create Community stage implemented

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

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

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

@@ -1,3 +1,8 @@
+import type {
+  ProportionBarState,
+  ProportionBarVariant,
+} from "../../progress/ProportionBar/ProportionBar.types";
+
 /**
  * Type definitions for CreateFlowFooter component
  *
@@ -13,6 +18,16 @@ export interface CreateFlowFooterProps {
    * @default true
    */
   progressBar?: boolean;
+  /**
+   * `ProportionBar` state when the bar is shown (driven by create-flow step).
+   * @default "1-0"
+   */
+  proportionBarProgress?: ProportionBarState;
+  /**
+   * `ProportionBar` layout variant (Figma create-flow footer uses `segmented`).
+   * @default "default"
+   */
+  proportionBarVariant?: ProportionBarVariant;
   /**
    * Callback function for Back button click
    */

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

@@ -1,3 +1,4 @@
+import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import ProportionBar from "../../progress/ProportionBar";
 import Button from "../../buttons/Button";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
@@ -5,9 +6,14 @@ import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 export function CreateFlowFooterView({
   secondButton,
   progressBar = true,
+  proportionBarProgress = "1-0",
+  proportionBarVariant: proportionBarVariantProp,
   onBackClick,
   className = "",
 }: CreateFlowFooterProps) {
+  const proportionBarVariant = normalizeProportionBarVariant(
+    proportionBarVariantProp,
+  );
   return (
     <footer
       className={`bg-black w-full ${className}`}
@@ -17,7 +23,10 @@ export function CreateFlowFooterView({
       {/* 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" />
+          <ProportionBar
+            progress={proportionBarProgress}
+            variant={proportionBarVariant}
+          />
         </div>
       )}