85e2552db8
All checks were successful
Deploy to Netlify / Deploy to Netlify (push) Successful in 1m39s
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "~/components/ui/card";
|
|
import { ChevronLeft, FileQuestion, RotateCw } from "lucide-react";
|
|
import { Link } from "react-router";
|
|
import { forceReload } from "~/lib/utils";
|
|
|
|
export default function Error({
|
|
title = "Page introuvable",
|
|
message = "Nous n'avons pas pu trouver la page que vous recherchiez.",
|
|
code = 404,
|
|
description = "La page que vous recherchez a peut-être été supprimée, son nom a été modifié ou est temporairement indisponible.",
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full w-full">
|
|
<Card className="max-w-md w-full">
|
|
<CardHeader className="text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<FileQuestion className="h-12 w-12 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-2xl">{title}</CardTitle>
|
|
<CardDescription>{message}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-4xl font-bold mb-2">{code}</p>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-center gap-2">
|
|
<Button>
|
|
<ChevronLeft />
|
|
<Link to="/">Retour</Link>
|
|
</Button>
|
|
<Button variant="destructive" className="text-white" onClick={forceReload}>
|
|
<RotateCw />
|
|
Recharger la page
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|