diff options
Diffstat (limited to 'frontend/src/routes/+layout.svelte')
| -rw-r--r-- | frontend/src/routes/+layout.svelte | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte new file mode 100644 index 0000000..9ed74ce --- /dev/null +++ b/frontend/src/routes/+layout.svelte @@ -0,0 +1,50 @@ +<script lang="ts"> + import { onMount } from 'svelte'; + import type { Maintenance } from '$lib/types'; + import '../app.css'; + + let { children } = $props(); + let maintenance = $state<Maintenance | null>(null); + + onMount(async () => { + try { + const res = await fetch('http://localhost:8080/api/active-maintenance'); + if (res.ok) { + const data = await res.json(); + maintenance = data.maintenance ?? null; + } + } catch { /* ignore */ } + }); +</script> + +<div class="min-h-screen"> + {#if maintenance} + <div class="border-b border-[#facc15]/30 bg-[#facc15]/5 px-6 py-3"> + <div class="mx-auto flex max-w-6xl items-center justify-center gap-2"> + <svg class="h-4 w-4 shrink-0 text-[#facc15]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> + <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /> + </svg> + <p class="text-xs font-medium text-[#facc15]">{maintenance.title}</p> + </div> + </div> + {/if} + + <header class="border-b border-[var(--border-color)] px-6 py-4"> + <div class="mx-auto flex max-w-6xl items-center justify-between"> + <div class="flex items-center gap-3"> + <a href="/" class="text-lg font-bold tracking-tight text-white transition-colors hover:text-[var(--green)]"> + <span class="text-[var(--green)]">●</span> YAUM + </a> + <span class="hidden text-xs text-[var(--text-muted)] sm:inline">Yet Another Uptime Monitor</span> + </div> + <nav class="flex items-center gap-4"> + <a href="/" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Dashboard</a> + <a href="/admin" class="text-xs text-[var(--text-muted)] transition-colors hover:text-white">Admin</a> + </nav> + </div> + </header> + + <main class="mx-auto max-w-6xl px-4 py-8"> + {@render children()} + </main> +</div> |