Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,79 @@
+"use client";
+
+import { useTranslation } from "../../../contexts/MessagesContext";
+import Button from "../../buttons/Button";
+import Stepper from "../../progress/Stepper";
+import type { ModalFooterProps } from "./ModalFooter.types";
+
+export function ModalFooterView({
+  showBackButton = false,
+  showNextButton = false,
+  onBack,
+  onNext,
+  backButtonText,
+  nextButtonText,
+  nextButtonDisabled = false,
+  currentStep,
+  totalSteps,
+  stepper: stepperProp,
+  footerContent,
+  className = "",
+}: ModalFooterProps) {
+  const t = useTranslation("common");
+
+  // Use localized defaults if text not provided
+  const defaultBackText = backButtonText || t("buttons.back");
+  const defaultNextText = nextButtonText || t("buttons.next");
+
+  // Determine if stepper should be shown
+  // Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
+  const shouldShowStepper =
+    stepperProp !== undefined
+      ? stepperProp
+      : currentStep !== undefined && totalSteps !== undefined;
+
+  return (
+    <div
+      className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
+    >
+      {/* Back Button - Absolutely positioned bottom left */}
+      {showBackButton && (
+        <div className="absolute left-[16px] top-[12px]">
+          <Button
+            buttonType="outline"
+            palette="default"
+            size="medium"
+            onClick={onBack}
+          >
+            {defaultBackText}
+          </Button>
+        </div>
+      )}
+
+      {/* Stepper (Centered) */}
+      {shouldShowStepper && currentStep && totalSteps && (
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+          <Stepper active={currentStep} totalSteps={totalSteps} />
+        </div>
+      )}
+
+      {/* Next Button - Absolutely positioned bottom right */}
+      {showNextButton && (
+        <div className="absolute right-[16px] top-[12px]">
+          <Button
+            buttonType="filled"
+            palette="default"
+            size="medium"
+            onClick={onNext}
+            disabled={nextButtonDisabled}
+          >
+            {defaultNextText}
+          </Button>
+        </div>
+      )}
+
+      {/* Custom Footer Content */}
+      {footerContent}
+    </div>
+  );
+}