src/routes/+error.svelte

<script lang="ts">
	import { page } from '$app/state';
	import Error404 from '$lib/components/errors/Error404.svelte';
	import Error500 from '$lib/components/errors/Error500.svelte';

	const status = $derived(page.status);
</script>

<div
	class="grid place-items-center"
	style="min-height: calc(100svh - var(--app-header-height, 64px));"
>
	{#if status === 404}
		<Error404 />
	{:else}
		<Error500 />
	{/if}
</div>

<style>
	:global(html),
	:global(body) {
		height: 100vh;
	}
</style>