68 lines
2.4 KiB
TypeScript
68 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/background/404.png";
|
|
import Profile from "@/public/404-image.jpg";
|
|
import { Activity, Home } from "lucide-react";
|
|
import { config } from "@/lib/config";
|
|
|
|
const MESSAGES = [
|
|
"ฟอร์มนี้อาจจะถูก Erika กินไปแล้ว...",
|
|
"หรือว่าฟอร์มนี้โดน Sukuna เล่นไปแล้ว...",
|
|
"ฟอร์มนี้อาจจะหมดอายุหรือโดนลบไปแล้ว...",
|
|
"บางทีคนสร้างอาจจะลืมเปิดฟอร์มนะ...",
|
|
"ฟอร์มหายไปไหนน้า... ลองเช็คลิงก์ดูอีกทีสิ",
|
|
];
|
|
|
|
export default function NotFound() {
|
|
const [goingHome, goHome] = useState(false);
|
|
const [message] = useState(() => MESSAGES[Math.floor(Math.random() * MESSAGES.length)]);
|
|
|
|
return (
|
|
<div className="relative flex min-h-screen w-full flex-col items-center justify-center gap-2">
|
|
<Image
|
|
src={Background}
|
|
alt="404 Background"
|
|
fill
|
|
priority
|
|
className="z-[-1] object-cover opacity-20 grayscale"
|
|
/>
|
|
<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="/form">
|
|
<Button
|
|
onClick={() => {
|
|
goHome(true);
|
|
}}
|
|
disabled={goingHome}
|
|
variant="destructive"
|
|
>
|
|
{goingHome ? <Spinner /> : <Home />}
|
|
กลับหน้าเลือก
|
|
</Button>
|
|
</Link>
|
|
<Link href={config.site.statusUrl}>
|
|
<Button variant="link" className="text-secondary-foreground">
|
|
<Activity />
|
|
สถานะเว็บไซต์
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|