148 lines
3.9 KiB
TypeScript
148 lines
3.9 KiB
TypeScript
/**
|
|
* Step Navigation Component
|
|
* Professional Resume Builder - Enhanced with resume-example.com design patterns
|
|
*
|
|
* @author David Valera Melendez <david@valera-melendez.de>
|
|
* @created 2025-08-07
|
|
* @location Made in Germany 🇩🇪
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
import { ModernButton } from '@/components/ui/ModernButton';
|
|
|
|
interface StepNavigationProps {
|
|
onPrevious?: () => void;
|
|
onNext?: () => void;
|
|
onSave?: () => void;
|
|
isFirstStep?: boolean;
|
|
isLastStep?: boolean;
|
|
canProceed?: boolean;
|
|
isLoading?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const StepNavigation: React.FC<StepNavigationProps> = ({
|
|
onPrevious,
|
|
onNext,
|
|
onSave,
|
|
isFirstStep = false,
|
|
isLastStep = false,
|
|
canProceed = true,
|
|
isLoading = false,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`border-border-primary flex items-center justify-between border-t pt-6 ${className}`}
|
|
>
|
|
<div>
|
|
{!isFirstStep && onPrevious && (
|
|
<ModernButton
|
|
variant="outline"
|
|
size="lg"
|
|
onClick={onPrevious}
|
|
disabled={isLoading}
|
|
className="min-w-32"
|
|
>
|
|
<svg
|
|
className="mr-2 h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 19l-7-7 7-7"
|
|
/>
|
|
</svg>
|
|
Previous
|
|
</ModernButton>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{onSave && (
|
|
<ModernButton
|
|
variant="secondary"
|
|
size="lg"
|
|
onClick={onSave}
|
|
disabled={isLoading}
|
|
className="min-w-24"
|
|
>
|
|
<svg
|
|
className="mr-2 h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12"
|
|
/>
|
|
</svg>
|
|
Save
|
|
</ModernButton>
|
|
)}
|
|
|
|
{isLastStep
|
|
? onNext && (
|
|
<ModernButton
|
|
variant="primary"
|
|
size="lg"
|
|
onClick={onNext}
|
|
disabled={!canProceed || isLoading}
|
|
loading={isLoading}
|
|
className="min-w-32"
|
|
>
|
|
<svg
|
|
className="mr-2 h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
Complete
|
|
</ModernButton>
|
|
)
|
|
: onNext && (
|
|
<ModernButton
|
|
variant="primary"
|
|
size="lg"
|
|
onClick={onNext}
|
|
disabled={!canProceed || isLoading}
|
|
loading={isLoading}
|
|
className="min-w-32"
|
|
>
|
|
Continue
|
|
<svg
|
|
className="ml-2 h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</ModernButton>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|