feat: Localize schedule-related text

src/routes/stops/[stopID]/schedule/+page.svelte

@@ -1,13 +1,14 @@
 <script>
 	import { page } from '$app/stores';
 	import LoadingSpinner from '$components/LoadingSpinner.svelte';
-	import ScheduleAccordionItem from '$components/schedule-for-stop/scheduleAccordionItem.svelte';
+	import ScheduleAccordionItem from '$components/schedule-for-stop/ScheduleAccordionItem.svelte';
 	import StopDetailsHeader from '$components/schedule-for-stop/StopDetailsHeader.svelte';
 	import { formatTime } from '$lib/formatters.js';
 	import { Accordion } from 'flowbite-svelte';
 	import { Datepicker } from 'flowbite-svelte';
 	import { onMount } from 'svelte';
 	import { isLoading } from 'svelte-i18n';
+	import { t } from 'svelte-i18n';
 
 	let selectedDate = '';
 	let prevSelectedDate = null;
@@ -133,40 +134,46 @@
 
 		<div class="flex flex-col gap-6 md:flex-row">
 			<div class="md:w-1/3">
-				<h2 class="mb-4 text-xl font-semibold text-gray-800">Select Date</h2>
+				<h2 class="mb-4 text-xl font-semibold text-gray-800">
+					{$t('schedule_for_stop.select_date')}
+				</h2>
 				<div class="rounded-lg border border-gray-300 bg-white p-4 shadow">
 					<Datepicker inline bind:value={selectedDate} />
 					<p class="mt-4 text-sm text-gray-600">
-						Selected date: {selectedDate
+						{$t('schedule_for_stop.selected_date')}: {selectedDate
 							? selectedDate.toLocaleDateString()
 							: currentDate.toLocaleDateString()}
 					</p>
 				</div>
 			</div>
 
 			<div class="flex flex-1 flex-col">
-				<h2 class="mb-4 text-2xl font-bold text-gray-800">Route Schedules</h2>
+				<h2 class="mb-4 text-2xl font-bold text-gray-800">
+					{$t('schedule_for_stop.route_schedules')}
+				</h2>
 
 				<div class="mb-4 flex gap-4">
 					<button
 						class="text-md rounded-lg bg-green-500 px-6 py-2 text-white shadow hover:bg-green-600 active:bg-green-700"
 						on:click={() => toggleAll(true)}
 					>
-						Show All Routes
+						{$t('schedule_for_stop.show_all_routes')}
 					</button>
 					<button
 						class="text-md rounded-lg bg-gray-500 px-6 py-2 text-white shadow hover:bg-gray-600 active:bg-gray-700"
 						on:click={() => toggleAll(false)}
 					>
-						Collapse All Routes
+						{$t('schedule_for_stop.collapse_all_routes')}
 					</button>
 				</div>
 
 				<div
 					class="flex-1 overflow-y-auto rounded-lg border border-gray-200 bg-white p-6 shadow-lg"
 				>
 					{#if emptySchedules}
-						<p class="text-center text-gray-700">No schedules available for the selected date.</p>
+						<p class="text-center text-gray-700">
+							{$t('schedule_for_stop.no_schedules_available')}
+						</p>
 					{:else}
 						<Accordion flush>
 							{#each schedules as schedule, index (schedule.tripHeadsign)}