Openstatus
www.openstatus.dev
chore: improve not-found (#556)
authored by
Maximilian Kaske
and committed by
GitHub
a69302bc
62319860
+29
-10
+29
-10
apps/web/src/app/not-found.tsx
+29
-10
apps/web/src/app/not-found.tsx
···
1
+
"use client";
2
+
1
3
import Link from "next/link";
4
+
import { useRouter } from "next/navigation";
2
5
3
6
import { Button } from "@openstatus/ui";
4
7
5
-
import { Header } from "@/components/dashboard/header";
6
8
import { Shell } from "@/components/dashboard/shell";
7
9
8
10
export default function NotFound() {
11
+
const router = useRouter();
12
+
9
13
return (
10
14
<main className="flex min-h-screen w-full flex-col space-y-6 p-4 md:p-8">
11
15
<div className="flex flex-1 flex-col items-center justify-center gap-8">
12
16
<div className="mx-auto max-w-xl text-center">
13
17
<Shell>
14
-
<div className="flex flex-col gap-4 p-12">
15
-
<Header
16
-
title="404"
17
-
description="Sorry, this page could not be found."
18
-
/>
19
-
{/* could think of redirecting the user to somewhere else! */}
20
-
<Button variant="link" asChild>
21
-
<Link href="/">Homepage</Link>
22
-
</Button>
18
+
<div className="flex flex-col gap-4 p-6 sm:p-12">
19
+
<div className="flex flex-col gap-2">
20
+
<p className="text-muted-foreground font-medium sm:text-lg">
21
+
404 Page not found
22
+
</p>
23
+
<h2 className="font-cal text-2xl sm:text-3xl">
24
+
Oops, something went wrong.
25
+
</h2>
26
+
<p className="text-muted-foreground text-sm sm:text-base">
27
+
The page you are looking for doesn't exist.
28
+
</p>
29
+
</div>
30
+
<div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
31
+
<Button
32
+
variant="link"
33
+
size="lg"
34
+
onClick={() => void router.back()}
35
+
>
36
+
Go Back
37
+
</Button>
38
+
<Button size="lg" asChild>
39
+
<Link href="/">Home</Link>
40
+
</Button>
41
+
</div>
23
42
</div>
24
43
</Shell>
25
44
</div>