42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { Head, Link } from "@inertiajs/react";
|
|
|
|
import AppLayout from "@/front/Layouts/AppLayout";
|
|
import useTrans from "@/hooks/use-translations";
|
|
|
|
export default function Default({ status }: Readonly<{ status: number }>) {
|
|
const s = String(status);
|
|
const title = useTrans(`errors.${s}.title`);
|
|
const description = useTrans(`errors.${s}.description`);
|
|
const backLabel = useTrans("front.back_to_your_website");
|
|
|
|
return (
|
|
<>
|
|
<Head title={`${s} — ${title}`} />
|
|
|
|
<section className="flex min-h-[75vh] flex-col items-center justify-center px-6 text-center font-baloo">
|
|
{/* grand numéro */}
|
|
<p className="text-[110px] font-extrabold leading-none text-[#E01B1B] sm:text-[160px] lg:text-[220px]">
|
|
{s}
|
|
</p>
|
|
|
|
{/* titre */}
|
|
<h1 className="mt-2 text-2xl font-extrabold uppercase tracking-tight text-neutral-900 lg:text-4xl">
|
|
{title}
|
|
</h1>
|
|
|
|
{/* description */}
|
|
<p className="mt-4 max-w-md text-lg text-neutral-600">{description}</p>
|
|
|
|
{/* retour accueil */}
|
|
<Link
|
|
href={route("front.homepage")}
|
|
className="mt-10 inline-block rounded-full bg-[#E01B1B] px-8 py-3 text-base font-bold text-white transition-transform hover:scale-105 focus:outline-none focus-visible:ring-4 focus-visible:ring-red-500/40"
|
|
>
|
|
{backLabel}
|
|
</Link>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
Default.layout = (page: React.ReactNode) => <AppLayout>{page}</AppLayout>;
|