Openstatus www.openstatus.dev
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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&apos;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>