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