()
| 119 | } |
| 120 | |
| 121 | export const ErrorBoundary = () => { |
| 122 | const navigate = useNavigate() |
| 123 | const error = useRouteError() |
| 124 | const { t } = useTranslation() |
| 125 | // Constrain the generic type so we don't provide a non-existent key |
| 126 | const statusCode = () => { |
| 127 | if (!isRouteErrorResponse(error)) { |
| 128 | return "500" |
| 129 | } |
| 130 | // Supported error code messages |
| 131 | switch (error.status) { |
| 132 | case 200: |
| 133 | return "200" |
| 134 | case 403: |
| 135 | return "403" |
| 136 | case 404: |
| 137 | return "404" |
| 138 | default: |
| 139 | return "500" |
| 140 | } |
| 141 | } |
| 142 | const errorStatusCode = statusCode() |
| 143 | if (errorStatusCode === "404") { |
| 144 | return ( |
| 145 | <div className="relative flex h-full min-h-screen w-screen items-center justify-center bg-[var(--color-background)] sm:pt-8 sm:pb-16"> |
| 146 | <div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8"> |
| 147 | <div className="relative flex min-h-72 flex-col items-center justify-center p-8 sm:overflow-hidden sm:rounded-2xl md:p-12 lg:p-16"> |
| 148 | <h1 className="mb-4 text-center font-bold text-4xl text-[var(--color-text-active)] sm:text-5xl"> |
| 149 | {t(`error.${errorStatusCode}.title`)} |
| 150 | </h1> |
| 151 | <p className="mb-8 max-w-2xl text-center text-[var(--color-text-muted)] text-lg"> |
| 152 | {t(`error.${errorStatusCode}.description`)} |
| 153 | </p> |
| 154 | |
| 155 | <div className="flex gap-4"> |
| 156 | <button |
| 157 | type="button" |
| 158 | onClick={() => navigate(-1)} |
| 159 | className="rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] px-5 py-2 font-medium text-[var(--color-text-normal)] text-sm transition-colors hover:bg-[var(--color-background)] hover:text-[var(--color-text-hover)]" |
| 160 | > |
| 161 | {t("buttons.back")} |
| 162 | </button> |
| 163 | <Link |
| 164 | to="/" |
| 165 | className="rounded-lg border border-[var(--color-border)] bg-[var(--color-background-active)] px-5 py-2 font-medium text-[var(--color-text-normal)] text-sm transition-colors hover:bg-[var(--color-background)] hover:text-[var(--color-text-hover)]" |
| 166 | > |
| 167 | {t("buttons.home")} |
| 168 | </Link> |
| 169 | </div> |
| 170 | </div> |
| 171 | </div> |
| 172 | </div> |
| 173 | ) |
| 174 | } |
| 175 | return ( |
| 176 | <div className="relative flex h-full min-h-screen w-screen items-center justify-center bg-[var(--color-background)] sm:pt-8 sm:pb-16"> |
| 177 | <div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8"> |
| 178 | <div className="relative flex min-h-72 flex-col items-center justify-center p-8 sm:overflow-hidden sm:rounded-2xl md:p-12 lg:p-16"> |
nothing calls this directly
no test coverage detected
searching dependent graphs…