Create event creation structuring and polishing

src/routes/private/events/event/new/components/StepNavigation.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	// Props
+	let { currentStep, totalSteps, canProceed, loading, prevStep, nextStep, createEvent } = $props<{
+		currentStep: number;
+		totalSteps: number;
+		canProceed: boolean;
+		loading: boolean;
+		prevStep: () => void;
+		nextStep: () => void;
+		createEvent: () => Promise<void>;
+	}>();
+</script>
+
+<div class="flex items-center justify-between">
+	<button
+		onclick={prevStep}
+		disabled={currentStep === 0}
+		class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded transition disabled:opacity-50 disabled:cursor-not-allowed"
+	>
+		Previous
+	</button>
+
+	<div class="flex gap-2">
+		{#if currentStep < totalSteps - 1}
+			<button
+				onclick={nextStep}
+				disabled={!canProceed}
+				class="px-6 py-2 bg-blue-600 text-white font-semibold rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				Next
+			</button>
+		{:else}
+			<button
+				onclick={createEvent}
+				disabled={!canProceed || loading}
+				class="px-6 py-2 bg-green-600 text-white font-semibold rounded hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{loading ? 'Creating...' : 'Create Event'}
+			</button>
+		{/if}
+	</div>
+</div>