49 lines
2.3 KiB
TypeScript
49 lines
2.3 KiB
TypeScript
import { useNavigate } from "react-router-dom"
|
|
import { ArrowLeft, ArrowRight, Home } from "lucide-react"
|
|
|
|
import { Button } from "../components/ui/button"
|
|
import { useTranslation } from "../hooks/useTranslation"
|
|
|
|
export default function NotFound() {
|
|
const navigate = useNavigate()
|
|
const { lang } = useTranslation()
|
|
const isFa = lang === "fa"
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_42%,#eef2ff_100%)] px-4 text-center text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_44%,#020617_100%)] dark:text-slate-50">
|
|
<section className="mx-auto max-w-2xl">
|
|
<div className="text-[7rem] font-semibold leading-none tracking-[-0.08em] text-slate-950 sm:text-[10rem] dark:text-white">
|
|
404
|
|
</div>
|
|
<h1 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
|
|
{isFa ? "صفحه پیدا نشد" : "Page not found"}
|
|
</h1>
|
|
<p className="mx-auto mt-5 max-w-xl text-base leading-8 text-slate-600 sm:text-lg dark:text-slate-300">
|
|
{isFa
|
|
? "این صفحه وجود ندارد یا آدرس آن تغییر کرده است."
|
|
: "This page does not exist or its address has changed."}
|
|
</p>
|
|
<div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => navigate(-1)}
|
|
className="h-14 rounded-full border-slate-200 bg-white/80 px-7 text-base text-slate-800 backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
|
|
>
|
|
{isFa ? <ArrowRight className="me-2 h-4 w-4" /> : <ArrowLeft className="me-2 h-4 w-4" />}
|
|
{isFa ? "بازگشت" : "Go back"}
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={() => navigate("/")}
|
|
className="h-14 rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
|
|
>
|
|
<Home className="me-2 h-4 w-4" />
|
|
{isFa ? "صفحه اصلی" : "Home page"}
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|