feat:map libre maps

src/lib/components/Header.svelte

@@ -20,27 +20,36 @@
 </script>
 
 <header class="app-header">
-	<h1 class="app-title">Serengo</h1>
-	<div class="profile-container">
-		<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
-		<ProfilePanel
-			username={user.username}
-			id={user.id}
-			isOpen={showProfilePanel}
-			onClose={closeProfilePanel}
-		/>
+	<div class="header-content">
+		<h1 class="app-title">Serengo</h1>
+		<div class="profile-container">
+			<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
+			<ProfilePanel
+				username={user.username}
+				id={user.id}
+				isOpen={showProfilePanel}
+				onClose={closeProfilePanel}
+			/>
+		</div>
 	</div>
 </header>
 
 <style>
 	.app-header {
+		width: 100%;
+		position: relative;
+		z-index: 10;
+		background-color: rgba(255, 255, 255, 0.2);
+		backdrop-filter: blur(10px);
+	}
+
+	.header-content {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 16px 20px;
-		max-width: 1200px;
 		margin: 0 auto;
-		position: relative;
+		max-width: 1200px;
 	}
 
 	.profile-container {

src/lib/components/Map.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { MapLibre } from 'svelte-maplibre';
+	import type { StyleSpecification } from 'svelte-maplibre';
+
+	interface Props {
+		style?: StyleSpecification;
+		center?: [number, number];
+		zoom?: number;
+		class?: string;
+	}
+
+	let {
+		style = {
+			version: 8,
+			sources: {
+				'osm-raster': {
+					type: 'raster',
+					tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+					tileSize: 256,
+					attribution: '© OpenStreetMap contributors'
+				}
+			},
+			layers: [
+				{
+					id: 'osm-tiles',
+					type: 'raster',
+					source: 'osm-raster'
+				}
+			]
+		},
+		center = [0, 0],
+		zoom = 2,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div class="map-container {className}">
+	<MapLibre {style} {center} {zoom} />
+</div>
+
+<style>
+	.map-container :global(.maplibregl-map) {
+		margin: 0 auto;
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+	}
+</style>