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