84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Button from "../../buttons/Button";
|
|
import Stepper from "../../progress/Stepper";
|
|
import type { ModalFooterProps } from "./ModalFooter.types";
|
|
|
|
export function ModalFooterView({
|
|
showBackButton = false,
|
|
showNextButton = false,
|
|
showRemoveButton = false,
|
|
onBack,
|
|
onNext,
|
|
onRemove,
|
|
backButtonText,
|
|
nextButtonText,
|
|
removeButtonText,
|
|
nextButtonDisabled = false,
|
|
currentStep,
|
|
totalSteps,
|
|
stepper: stepperProp,
|
|
footerContent,
|
|
className = "",
|
|
}: ModalFooterProps) {
|
|
const shouldShowStepper =
|
|
stepperProp !== undefined
|
|
? stepperProp
|
|
: currentStep !== undefined && totalSteps !== undefined;
|
|
const showStartBack = showBackButton && !showRemoveButton;
|
|
|
|
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}`}
|
|
>
|
|
{showRemoveButton && (
|
|
<div className="absolute left-[16px] top-[12px]">
|
|
<Button
|
|
buttonType="danger"
|
|
palette="default"
|
|
size="medium"
|
|
onClick={onRemove}
|
|
>
|
|
{removeButtonText}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{showStartBack && (
|
|
<div className="absolute left-[16px] top-[12px]">
|
|
<Button
|
|
buttonType="outline"
|
|
palette="default"
|
|
size="medium"
|
|
onClick={onBack}
|
|
>
|
|
{backButtonText}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{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>
|
|
)}
|
|
|
|
{showNextButton && (
|
|
<div className="absolute right-[16px] top-[12px]">
|
|
<Button
|
|
buttonType="filled"
|
|
palette="default"
|
|
size="medium"
|
|
onClick={onNext}
|
|
disabled={nextButtonDisabled}
|
|
>
|
|
{nextButtonText}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{footerContent}
|
|
</div>
|
|
);
|
|
}
|