init commit

src/components/navigation/StepNavigation.tsx

@@ -0,0 +1,147 @@
+/**
+ * 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>
+  );
+};