src/routes/+layout.svelte

<script lang="ts">
	import '../app.css';
	import '@fortawesome/fontawesome-free/css/all.min.css'

	let { children } = $props();
</script>

<div class="max-w-4xl mx-auto">
	<header class="text-center mb-10">
		<div class="flex justify-center items-center mb-4">
			<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="h-12 mr-3">
			<h1 class="text-3xl md:text-4xl font-bold text-gray-800">Bandwidth Monitor</h1>
		</div>
		<p class="text-gray-600 max-w-2xl mx-auto">
			Measure your connection speed to Hugging Face's servers in real-time
		</p>
	</header>
	{@render children()}
</div>