Graphical PDS migrator for AT Protocol
knotbin.com
1import { HttpError, PageProps } from "fresh";
2import posthog from "posthog-js";
3
4export default function ErrorPage(props: PageProps) {
5 const error = props.error; // Contains the thrown Error or HTTPError
6 if (error instanceof HttpError) {
7 posthog.default.capture("error", {
8 error: error.message,
9 status: error.status,
10 });
11 const status = error.status; // HTTP status code
12 // Render a 404 not found page
13 if (status === 404) {
14 return (
15 <>
16 <div class="px-4">
17 <div class="max-w-screen-xl mx-auto flex flex-col items-center text-center">
18 <div class="relative mb-4">
19 <img
20 src="/icons/plane_bold.svg"
21 class="w-32 h-32 sm:w-35 sm:h-35 brightness-[0.1] dark:invert dark:filter-none"
22 alt="Plane icon"
23 />
24 </div>
25
26 <div class="bg-white dark:bg-slate-900 airport-board p-8 sm:p-12 rounded-lg border border-slate-200 dark:border-white/10">
27 <h1 class="text-6xl sm:text-8xl md:text-9xl font-mono tracking-wider text-amber-500 dark:text-amber-400 font-bold mb-6">
28 404
29 </h1>
30 <div class="space-y-4">
31 <p class="text-2xl sm:text-3xl md:text-4xl font-mono text-slate-900 dark:text-white/90">
32 FLIGHT NOT FOUND
33 </p>
34 <p class="text-lg sm:text-xl text-slate-600 dark:text-white/70 max-w-2xl">
35 We couldn't locate the destination you're looking for.
36 Please check your flight number and try again.
37 </p>
38 <div class="mt-8">
39 <a
40 href="/"
41 class="inline-flex items-center px-8 py-4 bg-amber-500 dark:bg-amber-400 text-slate-900 rounded-md font-bold text-lg hover:bg-amber-600 dark:hover:bg-amber-500 transition-colors duration-200"
42 >
43 Return to Terminal
44 </a>
45 </div>
46 </div>
47 </div>
48 </div>
49 </div>
50 </>
51 );
52 }
53 }
54
55 return <h1>Oh no...</h1>;
56}