Restructuring and navigator

src/lib/components/wizard/StepColumnMap.svelte

@@ -2,6 +2,7 @@
 	import { selectedSheet, columnMapping, rawSheetData, currentStep } from '$lib/stores';
 	import { getSheetNames, getSheetData } from '$lib/google';
 	import { onMount } from 'svelte';
+	import Navigator from './subcomponents/Navigator.svelte';
 
 	// Type definitions for better TypeScript support
 	interface ColumnMappingType {
@@ -444,8 +445,6 @@
 		} catch (err) {
 			console.error('Failed to save column mapping to localStorage:', err);
 		}
-
-		currentStep.set(4); // Move to next step
 	}
 
 	async function handleShowEditor() {
@@ -754,20 +753,12 @@
 	{/if}
 
 	<!-- Navigation -->
-	<div class="flex justify-between">
-		<button
-			onclick={() => currentStep.set(2)}
-			class="rounded-lg bg-gray-200 px-4 py-2 font-medium text-gray-700 hover:bg-gray-300"
-		>
-			← Back to Sheet Selection
-		</button>
-
-		<button
-			onclick={handleContinue}
-			disabled={!mappingComplete}
-			class="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
-		>
-			{mappingComplete ? 'Continue →' : 'Select a column mapping'}
-		</button>
-	</div>
+	<Navigator
+		canProceed={mappingComplete}
+		{currentStep}
+		textBack="Back to Sheet Selection"
+		textForwardDisabled="Select a column mapping"
+		textForwardEnabled="Continue"
+		onForward={handleContinue}
+	/>
 </div>