44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
import { Button } from "@repo/shadcn-ui/components/button";
|
||
|
|
|
||
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "../lib/icons";
|
||
|
|
|
||
|
|
import { FormActions } from "./form-dialog";
|
||
|
|
|
||
|
|
/** Acciones de formulario completo o por pasos; el consumidor aporta navegación y textos. */
|
||
|
|
export function FormStepActions({
|
||
|
|
step,
|
||
|
|
total,
|
||
|
|
pending,
|
||
|
|
canContinue,
|
||
|
|
onPrevious,
|
||
|
|
previousLabel,
|
||
|
|
nextLabel,
|
||
|
|
saveLabel,
|
||
|
|
}: {
|
||
|
|
step: number | undefined;
|
||
|
|
total: number;
|
||
|
|
pending: boolean;
|
||
|
|
canContinue: boolean;
|
||
|
|
onPrevious: () => void;
|
||
|
|
previousLabel: string;
|
||
|
|
nextLabel: string;
|
||
|
|
saveLabel: string;
|
||
|
|
}) {
|
||
|
|
const hasNext = step !== undefined && step < total;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormActions>
|
||
|
|
{step !== undefined && step > 1 && (
|
||
|
|
<Button disabled={pending} onClick={onPrevious} type="button" variant="outline">
|
||
|
|
<ChevronLeftIcon aria-hidden="true" className="size-4" />
|
||
|
|
{previousLabel}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<Button disabled={pending || (step === 1 && !canContinue)} type="submit">
|
||
|
|
{hasNext ? nextLabel : saveLabel}
|
||
|
|
{hasNext && <ChevronRightIcon aria-hidden="true" className="size-4" />}
|
||
|
|
</Button>
|
||
|
|
</FormActions>
|
||
|
|
);
|
||
|
|
}
|