feat: add Vista-style 404 page
This commit is contained in:
49
app/not-found.tsx
Normal file
49
app/not-found.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import Window from "@/components/window";
|
||||||
|
import GoBackButton from "@/components/go-back-button";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<div className="mx-auto max-w-md pt-16">
|
||||||
|
<Window title="Windows cannot find this page">
|
||||||
|
<div className="flex items-start gap-4 mb-6">
|
||||||
|
<div className="flex-shrink-0 flex h-10 w-10 items-center justify-center rounded-full bg-red-600 shadow-inner">
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 18 18"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 3L15 15M3 15L15 3"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="2.5"
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="font-bold text-gray-900 text-base mb-1">
|
||||||
|
404 — Not Found
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600 leading-relaxed">
|
||||||
|
The page you're looking for doesn't exist. Check the address or
|
||||||
|
head back home.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-200/60 pt-4 flex justify-end gap-2">
|
||||||
|
<GoBackButton />
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="px-4 py-1.5 text-sm bg-gradient-to-b from-blue-100 to-blue-200 border border-blue-300 rounded hover:from-blue-200 hover:to-blue-300 transition-colors"
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</Window>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
components/go-back-button.tsx
Normal file
15
components/go-back-button.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
export default function GoBackButton() {
|
||||||
|
const router = useRouter();
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => router.back()}
|
||||||
|
className="px-4 py-1.5 text-sm bg-gradient-to-b from-blue-100 to-blue-200 border border-blue-300 rounded hover:from-blue-200 hover:to-blue-300 transition-colors"
|
||||||
|
>
|
||||||
|
← Go Back
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user