Added tabs. Fix bug with query. Add proper name in Navbar

src/lib/components/Navbar.svelte

@@ -6,17 +6,19 @@
 
 	const handleUnitChange = (unit: UnitsEnum) => {
 		$units = unit;
-		dropdownButton.click()
+		dropdownButton.click();
 	};
 </script>
 
 <div class="navbar bg-gray-50 shadow-sm">
 	<div class="flex-1">
-		<a href="/" class="btn btn-ghost text-xl">daisyUI</a>
+		<a href="/" class="btn btn-ghost text-xl">HotColdCities</a>
 	</div>
 	<div class="flex-none">
 		<details class="dropdown dropdown-bottom dropdown-end">
-			<summary class="btn btn-ghost btn-square m-1" bind:this={dropdownButton}>{$unitsSymbol}</summary>
+			<summary class="btn btn-ghost btn-square m-1" bind:this={dropdownButton}
+				>{$unitsSymbol}</summary
+			>
 			<ul class="dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow-sm">
 				<li onclick={() => handleUnitChange(UnitsEnum.METRIC)}>
 					<a>°C metric</a>
@@ -25,6 +27,6 @@
 					<a>°F imperial</a>
 				</li>
 			</ul>
-		  </details>
+		</details>
 	</div>
 </div>

src/lib/db/queries.ts

@@ -92,7 +92,7 @@ export const getWorldTemperatureStats = db.query(`
     WITH city_temps AS (
         SELECT 
             c.id as city_id,
-            c.name as city_name,
+            c.city as city_name,
             c.country_id,
             co.name as country_name,
             md.max as max_temp,

src/routes/+page.svelte

@@ -19,7 +19,19 @@
 	let { data, form }: PageProps = $props();
 	let temperatureData: HotColdCity[] | null = $state(data.temperatureData);
 	let tempDiff: number | null = $derived(
-		temperatureData ? Number((Math.abs(temperatureData[0].max_temp - temperatureData[1].max_temp)).toFixed(2)) : null
+		temperatureData
+			? Number(Math.abs(temperatureData[0].max_temp - temperatureData[1].max_temp).toFixed(2))
+			: null
+	);
+	let tempDiffImperial: number | null = $derived(
+		temperatureData
+			? Number(
+					Math.abs(
+						celsiusToFahrenheit(temperatureData[0].max_temp) -
+							celsiusToFahrenheit(temperatureData[1].max_temp)
+					).toFixed(2)
+				)
+			: null
 	);
 	let selectedCountryId: number | null = $state(data.country_id);
 	let countryForm: HTMLFormElement;
@@ -46,6 +58,8 @@
 			temperatureData = form.data;
 		}
 	});
+
+	$effect(() => console.log(tempDiff));
 </script>
 
 <svelte:head>
@@ -60,7 +74,15 @@
 			Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍
 			with ease! 🎉✨
 		</h2>
-		<!-- TODO: Add tabs to select between countries select or two cities  -->
+
+		<div class="my-10 flex w-full justify-center">
+			<ul class="menu menu-horizontal bg-base-100 rounded-box menu-lg">
+				<li><a>Pick a country</a></li>
+				<li><a>Compare two cities</a></li>
+				<li><a>Top of the wolrd</a></li>
+			</ul>
+			<!-- name of each tab group should be unique -->
+		</div>
 		<section class="mx-auto my-8 flex w-full justify-center">
 			<div class="flex w-full flex-col gap-2">
 				<div class="mx-auto w-full max-w-md">
@@ -95,8 +117,8 @@
 									<dt class="text-center text-lg text-red-600">🌡️ Hottest City</dt>
 								{/if}
 								<dt class="text-center text-3xl font-medium">{temperature.city_name}</dt>
-								<dd>
+								<dd class="text-center text-3xl font-light">
-									Max: {$units == UnitsEnum.IMPERIAL
+									{$units == UnitsEnum.IMPERIAL
 										? celsiusToFahrenheit(temperature.max_temp)
 										: temperature.max_temp}{$unitsSymbol}
 								</dd>
@@ -105,15 +127,14 @@
 						{#if tempDiff}
 							<div class="text-center">
 								<p class="text-lg font-medium">Temperature Difference</p>
-								<p class="text-2xl">
+								<p class="text-center text-3xl font-light">
-									{$units == UnitsEnum.IMPERIAL
+									{$units == UnitsEnum.IMPERIAL ? tempDiffImperial : tempDiff}{$unitsSymbol}
-										? celsiusToFahrenheit(tempDiff)
-										: tempDiff}{$unitsSymbol}
 								</p>
 							</div>
 						{/if}
 					</div>
 				{/if}
+
 				<!-- Add badges top  7 popular countries -->
 				<!-- <ul class="flex flex-col gap-1">
 					{#each filteredCities as city (city.id)}