pixies

1import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
2import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
3import {useNavigate, useRouteError, isRouteErrorResponse} from "react-router-dom";
4import {useTranslation} from "react-i18next";
5import "./styles.sass";
6
7export const RouteError = () => {
8    const error = useRouteError();
9    const navigate = useNavigate();
10    const {t} = useTranslation();
11
12    const is404 = isRouteErrorResponse(error) && error.status === 404;
13
14    return (
15        <div className="route-error-page">
16            <div className="route-error-content">
17                <div className="route-error-icon">
18                    <FontAwesomeIcon icon={faExclamationTriangle} size="4x"/>
19                </div>
20                <h1 className="route-error-title">
21                    {is404 ? "404" : t("route_error.title")}
22                </h1>
23                <h2 className="route-error-subtitle">
24                    {is404 ? t("not_found.title") : t("route_error.subtitle")}
25                </h2>
26                <p className="route-error-description">
27                    {is404 ? t("not_found.description") : t("route_error.description")}
28                </p>
29                {!is404 && error?.message && (
30                    <pre className="route-error-details">{error.message}</pre>
31                )}
32                <div className="route-error-actions">
33                    <button className="dialog-btn" onClick={() => navigate("/")}>
34                        {t("not_found.back_home")}
35                    </button>
36                    {!is404 && (
37                        <button className="dialog-btn dialog-secondary" onClick={() => window.location.reload()}>
38                            {t("route_error.reload")}
39                        </button>
40                    )}
41                </div>
42            </div>
43        </div>
44    );
45};
46