Implement create component

2026-02-02 12:53:52 -07:00
parent b98b9dded3
commit a8eb9e192b
21 changed files with 1061 additions and 7 deletions
@@ -0,0 +1,19 @@
+export interface ModalFooterProps {
+  showBackButton?: boolean;
+  showNextButton?: boolean;
+  onBack?: () => void;
+  onNext?: () => void;
+  /**
+   * Custom back button text. If not provided, uses localized "Back" from common.json
+   */
+  backButtonText?: string;
+  /**
+   * Custom next button text. If not provided, uses localized "Next" from common.json
+   */
+  nextButtonText?: string;
+  nextButtonDisabled?: boolean;
+  currentStep?: number;
+  totalSteps?: number;
+  footerContent?: React.ReactNode;
+  className?: string;
+}
@@ -0,0 +1,68 @@
+"use client";
+
+import { useTranslation } from "../../contexts/MessagesContext";
+import Button from "../Button";
+import Stepper from "../Stepper";
+import type { ModalFooterProps } from "./ModalFooter.types";
+
+export function ModalFooterView({
+  showBackButton = false,
+  showNextButton = false,
+  onBack,
+  onNext,
+  backButtonText,
+  nextButtonText,
+  nextButtonDisabled = false,
+  currentStep,
+  totalSteps,
+  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");
+  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
+            variant="outlined"
+            size="medium"
+            onClick={onBack}
+          >
+            {defaultBackText}
+          </Button>
+        </div>
+      )}
+
+      {/* Stepper (Centered) */}
+      {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
+            variant="default"
+            size="medium"
+            onClick={onNext}
+            disabled={nextButtonDisabled}
+          >
+            {defaultNextText}
+          </Button>
+        </div>
+      )}
+
+      {/* Custom Footer Content */}
+      {footerContent}
+    </div>
+  );
+}
@@ -0,0 +1,2 @@
+export { ModalFooterView as default } from "./ModalFooter.view";
+export type { ModalFooterProps } from "./ModalFooter.types";