egentrening/src/routes/+page.svelte

<script lang="ts">
	import WorkoutLogger from '$lib/WorkoutLogger.svelte';
	import WorkoutDisplay from '$lib/WorkoutDisplay.svelte';

	let workoutDisplayComponent: WorkoutDisplay;

	function handleWorkoutSaved() {
		// Refresh the display when workout is saved
		if (workoutDisplayComponent) {
			workoutDisplayComponent.loadTodaysWorkout();
		}
	}
</script>

<div class="min-h-screen bg-gray-100 py-8">
	<div class="container mx-auto px-4">
		<h1 class="mb-8 text-center text-4xl font-bold text-gray-800">🏋️ Egentrening</h1>
		<p class="mb-8 text-center text-gray-600">Track your daily fitness progress</p>

		<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
			<!-- Display today's workout -->
			<div>
				<WorkoutDisplay bind:this={workoutDisplayComponent} />
			</div>

			<!-- Log new workout -->
			<div>
				<WorkoutLogger on:workoutSaved={handleWorkoutSaved} />
			</div>
		</div>
	</div>
</div>