tangled.org
Monorepo for Tangled
tangled.org
1<script lang="ts">
2 import { page } from "$app/state";
3 import Button from "$lib/components/ui/Button.svelte";
4
5 const copy = $derived.by(() => {
6 switch (page.status) {
7 case 404:
8 return {
9 status: "404",
10 title: "Page not found",
11 message:
12 "The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.",
13 mark: "?",
14 tone: "bg-background-inset text-foreground-subtle"
15 };
16 case 503:
17 return {
18 status: "503",
19 title: "Service unavailable",
20 message:
21 "We were unable to reach the service backing this page. It may be temporarily unavailable.",
22 mark: "503",
23 tone: "bg-background-info-subtle text-foreground-info"
24 };
25 default:
26 return {
27 status: "500",
28 title: "Internal server error",
29 message:
30 page.error?.message ??
31 "We encountered an error while processing your request. Please try again later.",
32 mark: "!",
33 tone: "bg-background-danger-subtle text-foreground-danger"
34 };
35 }
36 });
37</script>
38
39<svelte:head>
40 <title>{copy.status} · Tangled</title>
41</svelte:head>
42
43<section class="flex min-h-[60vh] flex-col items-center justify-center text-center">
44 <div class="mx-auto max-w-lg rounded-lg bg-background-default p-8 shadow-sm">
45 <div class="mb-6">
46 <div
47 class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
48 >
49 <span class="font-mono text-xl font-bold" aria-hidden="true">{copy.mark}</span>
50 </div>
51 </div>
52
53 <div class="space-y-4">
54 <h1 class="text-2xl font-bold text-foreground-default sm:text-3xl">
55 {copy.status} — {copy.title}
56 </h1>
57 <p class="text-foreground-muted">{copy.message}</p>
58 <div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
59 <Button href="/" variant="default">Back to home</Button>
60 </div>
61 </div>
62 </div>
63</section>