Openstatus
www.openstatus.dev
chore: not-found
+43
+43
apps/status-page/src/app/not-found.tsx
+43
apps/status-page/src/app/not-found.tsx
···
1
+
"use client";
2
+
3
+
import Link from "next/link";
4
+
import { useRouter } from "next/navigation";
5
+
6
+
import { Button } from "@/components/ui/button";
7
+
8
+
export default function NotFound() {
9
+
const router = useRouter();
10
+
11
+
return (
12
+
<main className="flex min-h-screen w-full flex-col space-y-6 p-4 md:p-8 bg-background">
13
+
<div className="flex flex-1 flex-col items-center justify-center gap-8">
14
+
<div className="mx-auto max-w-xl text-center border bg-card">
15
+
<div className="flex flex-col gap-4 p-6 sm:p-12">
16
+
<div className="flex flex-col gap-2">
17
+
<p className="font-mono text-foreground">404 Page not found</p>
18
+
<h2 className="font-cal text-2xl text-foreground">
19
+
Oops, something went wrong.
20
+
</h2>
21
+
<p className="text-muted-foreground text-sm sm:text-base">
22
+
The page you are looking for doesn't exist.
23
+
</p>
24
+
</div>
25
+
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
26
+
<Button
27
+
variant="outline"
28
+
size="lg"
29
+
onClick={() => void router.back()}
30
+
className="cursor-pointer"
31
+
>
32
+
Go Back
33
+
</Button>
34
+
<Button size="lg" asChild>
35
+
<Link href="/">Home</Link>
36
+
</Button>
37
+
</div>
38
+
</div>
39
+
</div>
40
+
</div>
41
+
</main>
42
+
);
43
+
}