Create event creation structuring and polishing

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	let { eventData, errors } = $props<{
+		eventData: {
+			name: string;
+			date: string;
+		};
+		errors: Record<string, string>;
+	}>();
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h3 class="text-lg font-medium text-gray-900 mb-4">Event details</h3>
+
+		<label for="eventName" class="block text-sm font-medium text-gray-700 mb-2">
+			Event Name *
+		</label>
+		<input
+			id="eventName"
+			type="text"
+			bind:value={eventData.name}
+			class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+			placeholder="Enter event name"
+		/>
+		{#if errors.name}
+			<p class="mt-1 text-sm text-red-600">{errors.name}</p>
+		{/if}
+	</div>
+
+	<div>
+		<label for="eventDate" class="block text-sm font-medium text-gray-700 mb-2">
+			Event Date *
+		</label>
+		<input
+			id="eventDate"
+			type="date"
+			bind:value={eventData.date}
+			class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+		/>
+		{#if errors.date}
+			<p class="mt-1 text-sm text-red-600">{errors.date}</p>
+		{/if}
+	</div>
+</div>