David
2149ecb17b
- Added a new layout for asset creation that guides users through three steps: template selection, field completion, and final review. - Introduced `AssetCreateProgress` component to display current step and instructions. - Updated `AssetForm` to handle step navigation and validation. - Integrated `FormStepActions` for navigation between steps and submission handling. - Enhanced localization for new steps and descriptions in both English and Spanish. - Refactored asset form components to separate identity and field sections for better clarity and usability. - Added helper functions for validating required fields and suggesting asset names based on input.
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>
|
|
);
|
|
}
|