nearby

src/routes/weather/historical/[location]/DateRangeControls.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import * as m from '$lib/paraglide/messages';
+
 	interface Props {
 		start: string;
 		end: string;
@@ -34,10 +36,10 @@
 	}
 
 	const presets = [
-		{ label: '7 days', apply: () => applyLastDays(7) },
-		{ label: '30 days', apply: () => applyLastDays(30) },
-		{ label: '90 days', apply: () => applyLastDays(90) },
-		{ label: 'Month, last year', apply: applyThisMonthLastYear }
+		{ label: () => m.historical_last_days({ days: 7 }), apply: () => applyLastDays(7) },
+		{ label: () => m.historical_last_days({ days: 30 }), apply: () => applyLastDays(30) },
+		{ label: () => m.historical_last_days({ days: 90 }), apply: () => applyLastDays(90) },
+		{ label: () => m.historical_month_last_year(), apply: applyThisMonthLastYear }
 	];
 
 	// ─── Manual inputs ────────────────────────────────────────────────────────────
@@ -65,7 +67,9 @@
 >
 	<div class="flex flex-wrap items-end gap-3">
 		<div class="grid gap-1">
-			<label for="hist-start" class="text-xs font-semibold text-muted-foreground">From</label>
+			<label for="hist-start" class="text-xs font-semibold text-muted-foreground"
+				>{m.historical_from()}</label
+			>
 			<input
 				id="hist-start"
 				type="date"
@@ -77,7 +81,9 @@
 			/>
 		</div>
 		<div class="grid gap-1">
-			<label for="hist-end" class="text-xs font-semibold text-muted-foreground">To</label>
+			<label for="hist-end" class="text-xs font-semibold text-muted-foreground"
+				>{m.historical_to()}</label
+			>
 			<input
 				id="hist-end"
 				type="date"
@@ -93,15 +99,15 @@
 	<div
 		class="inline-flex flex-wrap items-center gap-0.5 rounded-lg bg-muted p-0.5 text-xs font-semibold"
 		role="group"
-		aria-label="Quick ranges"
+		aria-label={m.historical_quick_ranges()}
 	>
-		{#each presets as preset (preset.label)}
+		{#each presets as preset (preset.label())}
 			<button
 				type="button"
 				class="cursor-pointer rounded-md px-2.5 py-1.5 whitespace-nowrap text-muted-foreground transition-colors hover:bg-background hover:text-foreground hover:shadow-sm"
 				onclick={preset.apply}
 			>
-				{preset.label}
+				{preset.label()}
 			</button>
 		{/each}
 	</div>