fix: use Button asChild with Link for better semantics and accessibility on 404 page
This commit is contained in:
parent
a9a0b83703
commit
03f9ebede8
|
|
@ -4,34 +4,35 @@ import { Undo2 } from "lucide-react";
|
|||
import Image from "next/image";
|
||||
|
||||
export const metadata = {
|
||||
title: "404 | Page Not Found - OpenCut",
|
||||
description:
|
||||
"Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
|
||||
title: "404 | Page Not Found - OpenCut",
|
||||
description:
|
||||
"Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
|
||||
};
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen flex bg-white items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<Image
|
||||
src="/images/404-custom.png"
|
||||
alt="404 - Page Not Found"
|
||||
width={300}
|
||||
height={200}
|
||||
className="mx-auto"
|
||||
/>
|
||||
return (
|
||||
<div className="min-h-screen flex bg-white items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-4">
|
||||
<Image
|
||||
src="/images/404-custom.png"
|
||||
alt="404 - Page Not Found"
|
||||
width={300}
|
||||
height={200}
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Sorry, the page you're looking for can't be found.
|
||||
</p>
|
||||
<Button asChild>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Undo2 className="h-4 w-4" aria-hidden="true" focusable="false" />
|
||||
<span>Go Back To Home</span>
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Sorry, the page you're looking for can't be found.
|
||||
</p>
|
||||
<Button>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<Undo2 className="h-4 w-4" />
|
||||
Go Back To Home
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue