mirror of
https://litchi.icu/ngc2207/judge4c-latest.git
synced 2025-07-13 17:24:30 +00:00
feat: add NotFoundPage component
This commit is contained in:
parent
7e91eea2e3
commit
d291a94997
132
src/app/not-found.tsx
Normal file
132
src/app/not-found.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import {
|
||||||
|
RssIcon,
|
||||||
|
BookMarkedIcon,
|
||||||
|
BookOpenTextIcon,
|
||||||
|
ChevronRightIcon,
|
||||||
|
ClipboardListIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { JSX, SVGProps } from "react";
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
name: "文档",
|
||||||
|
href: "#",
|
||||||
|
description: "探索如何将我们的应用与工具完美融合。",
|
||||||
|
icon: BookOpenTextIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "API 参考",
|
||||||
|
href: "#",
|
||||||
|
description:
|
||||||
|
"我们库的完整 API 参考，就像一本详尽的探险指南，助您深入探索。",
|
||||||
|
icon: ClipboardListIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "指南",
|
||||||
|
href: "#",
|
||||||
|
description:
|
||||||
|
"涵盖流行设置的安装指南，就像为您量身定制的入门地图，助您轻松上手。",
|
||||||
|
icon: BookMarkedIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "博客",
|
||||||
|
href: "#",
|
||||||
|
description: "探索我们的最新动态与深度文章。",
|
||||||
|
icon: RssIcon,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const social = [
|
||||||
|
{
|
||||||
|
name: "GitHub",
|
||||||
|
href: "https://github.com/NGC2207/judge4c",
|
||||||
|
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
|
||||||
|
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function NotFoundPage() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<main className="mx-auto w-full pt-4">
|
||||||
|
<div className="flex flex-row items-center gap-x-16 mx-auto justify-center">
|
||||||
|
<Image
|
||||||
|
alt="Judge4c"
|
||||||
|
src="/litchi.svg"
|
||||||
|
width={120}
|
||||||
|
height={120}
|
||||||
|
className="h-10 w-auto sm:h-12"
|
||||||
|
/>
|
||||||
|
<p className="font-bold text-4xl">404</p>
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto text-center">
|
||||||
|
<h1 className="mt-6 text-balance text-6xl font-semibold tracking-tight">
|
||||||
|
这个页面迷失了...
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-pretty text-lg font-medium text-foreground/50 sm:text-xl/8">
|
||||||
|
或许您可以尝试其他航线？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto mt-8 flow-root max-w-lg">
|
||||||
|
<h2 className="sr-only">Popular pages</h2>
|
||||||
|
<ul role="list" className="-mt-6 divide-y divide-border border-b">
|
||||||
|
{links.map((link, linkIdx) => (
|
||||||
|
<li key={linkIdx} className="relative flex gap-x-6 py-6">
|
||||||
|
<div className="flex h-10 w-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
|
||||||
|
<link.icon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="h-6 w-6 text-pink-400"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex-auto">
|
||||||
|
<h3 className="text-sm/6 font-semibold">
|
||||||
|
<a href={link.href}>
|
||||||
|
<span aria-hidden="true" className="absolute inset-0" />
|
||||||
|
{link.name}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p className="mt-2 text-sm/6 text-foreground/60">
|
||||||
|
{link.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-none self-center">
|
||||||
|
<ChevronRightIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="h-5 w-5 text-foreground/40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer className="pt-10">
|
||||||
|
<div className="mx-auto flex max-w-7xl flex-col items-center justify-center gap-8 px-6 sm:flex-row lg:px-8">
|
||||||
|
<p className="text-sm/7 text-foreground/40">
|
||||||
|
© Judge4c, Ngc. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<div className="hidden sm:block sm:h-7 sm:w-px sm:flex-none sm:bg-foreground/20" />
|
||||||
|
<div className="flex gap-x-4">
|
||||||
|
{social.map((item, itemIdx) => (
|
||||||
|
<a
|
||||||
|
key={itemIdx}
|
||||||
|
href={item.href}
|
||||||
|
className="text-foreground/40 hover:text-foreground/50"
|
||||||
|
>
|
||||||
|
<span className="sr-only">{item.name}</span>
|
||||||
|
<item.icon aria-hidden="true" className="h-6 w-6" />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user