Files
lotteryFront/src/app/not-found.tsx
kang ecb032f8cc
Some checks failed
lotteryfront CI / build (push) Has been cancelled
feat: enhance API error handling and UI improvements
- Updated `getPublicCurrencies` and `getPlayerAuthCaptcha` functions to include `skipGlobalServerError` option, improving error handling for API requests.
- Refactored the NotFoundPage component to enhance mobile responsiveness and UI consistency, integrating `PlayerMobileViewport`.
- Improved the NetworkStatusBanner and OfflineBanner components by adding player banner height reference for better layout management.
- Updated Wallet components to utilize `PlayerMoneyDisplay` for consistent currency representation and added credit mode handling in various screens.
- Enhanced the WalletScreen and Transfer screens with loading panels and credit guard logic for better user experience during wallet operations.
2026-06-22 10:50:52 +08:00

74 lines
2.7 KiB
TypeScript

"use client";
import Link from "next/link";
import { FileQuestion, Home } from "lucide-react";
import { useTranslation } from "react-i18next";
import { PlayerMobileViewport } from "@/components/layout/player-mobile-viewport";
import { playerViewportColumnClass } from "@/lib/player-viewport";
import { cn } from "@/lib/utils";
import "@/i18n";
export default function NotFoundPage(): React.ReactElement {
const { t } = useTranslation("player");
return (
<PlayerMobileViewport>
<div
className={cn(
"flex min-h-dvh flex-col items-center justify-center bg-white px-4 py-8 text-slate-900",
playerViewportColumnClass,
)}
>
<div className="w-full rounded-2xl border border-[#e4eaf4] bg-white p-8 shadow-[0_10px_28px_rgba(15,23,42,0.08)]">
<div className="flex flex-col items-center text-center">
<div className="mb-4 flex size-16 items-center justify-center rounded-full bg-[#fff1f3]">
<FileQuestion className="size-8 text-[#e5002c]" aria-hidden />
</div>
<p className="text-6xl font-black tracking-tight text-[#0b3f96]/20">404</p>
<h1 className="mt-2 text-xl font-black text-[#0b3f96]">
{t("notFound.title")}
</h1>
<p className="mt-2 text-sm leading-relaxed text-slate-500">
{t("notFound.description")}
</p>
<Link
href="/hall"
className="mt-6 inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-[#e5002c] text-sm font-bold text-white shadow-[0_8px_20px_rgba(229,0,44,0.22)] hover:bg-[#d10028]"
>
<Home className="size-4" aria-hidden />
{t("notFound.home")}
</Link>
<div className="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs font-semibold text-[#32518d]">
<Link href="/hall" className="hover:text-[#0b3f96] hover:underline">
{t("notFound.hall")}
</Link>
<span className="text-slate-300" aria-hidden>
|
</span>
<Link href="/results" className="hover:text-[#0b3f96] hover:underline">
{t("notFound.results")}
</Link>
<span className="text-slate-300" aria-hidden>
|
</span>
<Link href="/wallet" className="hover:text-[#0b3f96] hover:underline">
{t("notFound.funds")}
</Link>
</div>
</div>
</div>
<p className="mt-8 text-xs text-slate-400">
Lottery © {new Date().getFullYear()}
</p>
</div>
</PlayerMobileViewport>
);
}