67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useState } from "react";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import Background from "@/public/404.png";
|
|
import Profile from "@/public/404-image.jpg";
|
|
import { Activity, Home } from "lucide-react";
|
|
|
|
const MESSAGES = [
|
|
"Erika กินหน้านี้ไปแล้ว...",
|
|
"หรือจริงๆแล้วหน้านี้จะโดน Sukuna เล่น...",
|
|
"อาจจะโดนต่อยจากคนด้านบนแล้วก็ได้...",
|
|
"หรือ Erika ตัวปลอมขะมีอยู่จริง...",
|
|
"หน้านี้อาจโดนErikaตัวปลอมทำลายไปแล้วนะ...",
|
|
];
|
|
|
|
export default function NotFound() {
|
|
const [goingHome, goHome] = useState(false);
|
|
const [message] = useState(() => MESSAGES[Math.floor(Math.random() * MESSAGES.length)]);
|
|
|
|
return (
|
|
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-2 bg-[#2225] backdrop-blur-md backdrop-grayscale">
|
|
<Image
|
|
src={Background}
|
|
alt="404 Background"
|
|
fill
|
|
priority
|
|
className="fixed top-0 left-0 z-[-1] h-full w-full object-cover opacity-20"
|
|
/>
|
|
<div className="rounded-sm bg-white p-4 pb-12 shadow-lg max-sm:landscape:hidden">
|
|
<Image
|
|
src={Profile}
|
|
alt="404"
|
|
width={256}
|
|
height={256}
|
|
className="vintage-filter h-64 w-64 bg-gray-300"
|
|
/>
|
|
</div>
|
|
<h2 className="text-2xl font-semibold">404 ไม่พบหน้านี้</h2>
|
|
<span>{message}</span>
|
|
<div className="flex gap-2">
|
|
<Link href="/">
|
|
<Button
|
|
onClick={() => {
|
|
goHome(true);
|
|
}}
|
|
disabled={goingHome}
|
|
variant="destructive"
|
|
>
|
|
{goingHome ? <Spinner /> : <Home />}
|
|
กลับหน้าแรก
|
|
</Button>
|
|
</Link>
|
|
<Link href="https://status.sudloh.com">
|
|
<Button variant="link" className="text-secondary-foreground">
|
|
<Activity />
|
|
สถานะเว็บไซต์
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|