72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useEffect, 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";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
export default function NotFound() {
|
|
const [goingHome, goHome] = useState(false);
|
|
const [message, setMessage] = useState("");
|
|
|
|
useEffect(() => {
|
|
const messages = [
|
|
"Erika กินหน้านี้ไปแล้ว...",
|
|
"หรือจริงๆแล้วหน้านี้จะโดน Sukuna เล่น...",
|
|
"อาจจะโดนต่อยจากคนด้านบนแล้วก็ได้...",
|
|
"หรือ Erika ตัวปลอมขะมีอยู่จริง...",
|
|
"หน้านี้อาจโดนErikaตัวปลอมทำลายไปแล้วนะ...",
|
|
];
|
|
|
|
setMessage(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 || <Skeleton className="h-6 w-40" />}</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>
|
|
);
|
|
}
|