first

src/routes/(app)/[stateSlug]/[countySlug]/+page.svelte

@@ -0,0 +1,44 @@
+<!-- src/routes/(app)/[stateSlug]/[countySlug]/+page.svelte -->
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+
+    const { stateSlug, countySlug } = $page.params as { stateSlug: string; countySlug: string };
+    let countyData: { id: number; name: string; state: string } | null = null;
+    let loading = true;
+    let error: string | null = null;
+
+    onMount(async () => {
+        try {
+            // Ensure API URL matches the Docker port forwarding for API (9552)
+            const response = await fetch(`http://localhost:9552/state/${stateSlug.toUpperCase()}/${countySlug}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch county data: ${response.statusText}`);
+            }
+            countyData = await response.json();
+        } catch (err) {
+            error = err instanceof Error ? err.message : 'An error occurred while fetching county data.';
+            countyData = null;
+        } finally {
+            loading = false;
+        }
+    });
+</script>3
+
+{#if loading}
+    <div class="text-center py-10">
+        <p>Loading county data...</p>
+    </div>
+{:else if countyData}
+    <div class="text-center py-10">
+        <h1 class="text-3xl font-bold">{countyData.name}</h1>
+        <p class="text-xl mt-4">County ID: {countyData.id}</p>
+        <a href="/{stateSlug}" class="btn btn-primary mt-6">Back to State</a>
+    </div>
+{:else if error}
+    <div class="text-center py-10">
+        <h1 class="text-3xl font-bold text-error">County Not Found</h1>
+        <p class="mt-4">{error}</p>
+        <a href="/" class="btn btn-primary mt-6">Go Back to Map</a>
+    </div>
+{/if}