Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script lang="ts"> import { resolve } from "$app/paths"; import { page } from "$app/state"; import Button from "$lib/components/ui/Button.svelte";
const copy = $derived.by(() => { switch (page.status) { case 404: return { status: "404", title: "Page not found", message: "The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.", mark: "?", tone: "bg-background-inset text-foreground-muted" }; case 503: return { status: "503", title: "Service unavailable", message: "We were unable to reach the service backing this page. It may be temporarily unavailable.", mark: "503", tone: "bg-background-info-subtle text-foreground-info" }; default: return { status: "500", title: "Internal server error", message: page.error?.message ?? "We encountered an error while processing your request. Please try again later.", mark: "!", tone: "bg-background-danger-subtle text-foreground-danger" }; } });</script>
<svelte:head> <title>{copy.status} · Tangled</title></svelte:head>
<section class="flex min-h-[60vh] flex-col items-center justify-center text-center"> <div class="mx-auto max-w-narrow rounded-lg bg-background-default p-2xl"> <div class="mb-xl"> <div class={`mx-auto mb-md flex size-16 items-center justify-center rounded-full ${copy.tone}`} > <span class="font-mono typography-heading-4 font-bold" aria-hidden="true" >{copy.mark}</span > </div> </div>
<div class="space-y-md"> <h1 data-testid="errorTitle" data-status={copy.status} class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2" > {copy.status} — {copy.title} </h1> <p data-testid="errorMessage" class="text-foreground-muted">{copy.message}</p> <div class="mt-xl flex flex-col items-center justify-center gap-sm sm:flex-row"> <Button href={resolve("/")} variant="default">Back to home</Button> </div> </div> </div></section>