Restructuring and navigator

src/lib/components/wizard/StepSheetSearch.svelte

@@ -2,6 +2,7 @@
 	import { availableSheets, selectedSheet, currentStep } from '$lib/stores';
 	import { searchSheets } from '$lib/google';
 	import { onMount } from 'svelte';
+	import Navigator from './subcomponents/Navigator.svelte';
 
 	let searchQuery = $state('');
 	let isLoading = $state(false);
@@ -66,11 +67,6 @@
 	}
 
 	let canProceed = $derived($selectedSheet !== null);
-
-	function handleContinue() {
-		if (!canProceed) return;
-		currentStep.set(3); // Move to the column mapping step
-	}
 </script>
 
 <div class="p-6">
@@ -262,20 +258,11 @@
 	{/if}
 
 	<!-- Navigation -->
-	<div class="flex justify-between">
-		<button
-			onclick={() => currentStep.set(1)}
-			class="rounded-lg bg-gray-200 px-4 py-2 font-medium text-gray-700 hover:bg-gray-300"
-		>
-			← Back to Auth
-		</button>
-
-		<button
-			onclick={handleContinue}
-			disabled={!canProceed}
-			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"
-		>
-			{canProceed ? 'Continue →' : 'Select a sheet to continue'}
-		</button>
-	</div>
+	<Navigator
+		{canProceed}
+		{currentStep}
+		textBack="Back to Auth"
+		textForwardDisabled="Select a sheet"
+		textForwardEnabled="Continue"
+	/>
 </div>