70 lines
2.2 KiB
Svelte
70 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { setContext } from 'svelte';
|
|
|
|
import { page } from '$app/stores';
|
|
|
|
import { storedLocation } from '$lib/stores/settings';
|
|
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
children?: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
|
|
// The location heading lives in the layout, not in each page: a layout
|
|
// survives navigation, so switching between forecasts no longer tears the
|
|
// heading down and rebuilds it once the next page's data has loaded.
|
|
// Page-specific controls (model pickers, range buttons) render into the same
|
|
// row through this context.
|
|
let actions = $state<Snippet | null>(null);
|
|
setContext('weather-hero', {
|
|
setActions: (snippet: Snippet | null) => {
|
|
actions = snippet;
|
|
}
|
|
});
|
|
|
|
// Page data wins; the persisted store covers the moment before the first
|
|
// load resolves (and any weather page that doesn't carry a location).
|
|
let location = $derived($page.data.location ?? $storedLocation);
|
|
|
|
const SUBTITLES: [string, string][] = [
|
|
['/weather/week', '7-day forecast'],
|
|
['/weather/compare', 'Model comparison'],
|
|
['/weather/14-day', '14-day ensemble forecast'],
|
|
['/weather/seasonal', 'Seasonal outlook'],
|
|
['/weather/historical', 'Historical weather']
|
|
];
|
|
let subtitle = $derived(
|
|
SUBTITLES.find(([prefix]) => $page.url.pathname.startsWith(prefix))?.[1] ?? null
|
|
);
|
|
</script>
|
|
|
|
{#if subtitle && location}
|
|
<div class="relative mb-3 flex flex-wrap items-center justify-between gap-x-6 gap-y-3 md:mb-5">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<img
|
|
class="h-10 w-10 shrink-0 rounded-full shadow-sm ring-2 ring-border"
|
|
src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
|
|
alt={location.country ?? ''}
|
|
/>
|
|
<div class="min-w-0">
|
|
<h1 class="truncate text-2xl leading-tight font-bold tracking-tight md:text-3xl">
|
|
{location.name}
|
|
</h1>
|
|
<p class="truncate text-sm text-muted-foreground">
|
|
<span class="lg:hidden"
|
|
>{#if location.admin1}{location.admin1},
|
|
{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
|
|
>{subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if actions}{@render actions()}{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{@render children?.()}
|