Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<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-subtle" }; 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-lg rounded-lg bg-background-default p-8 shadow-xs"> <div class="mb-6"> <div class={`mx-auto mb-4 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-4"> <h1 class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2" > {copy.status} — {copy.title} </h1> <p class="text-foreground-muted">{copy.message}</p> <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row"> <Button href={resolve("/")} variant="default">Back to home</Button> </div> </div> </div></section>