You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.6 KiB
47 lines
1.6 KiB
import { useTranslation } from "react-i18next"; |
|
|
|
import { ButtonPlain } from "@/components/buttons/Button"; |
|
import { Icons } from "@/components/Icon"; |
|
import { IconPill } from "@/components/layout/IconPill"; |
|
import { DisplayError } from "@/components/player/display/displayInterface"; |
|
import { Title } from "@/components/text/Title"; |
|
import { Paragraph } from "@/components/utils/Text"; |
|
import { ErrorContainer, ErrorLayout } from "@/pages/layouts/ErrorLayout"; |
|
import { ErrorCard } from "@/pages/parts/errors/ErrorCard"; |
|
|
|
export function ErrorPart(props: { error: any; errorInfo: any }) { |
|
const { t } = useTranslation(); |
|
|
|
const maxLineCount = 5; |
|
const errorLines = (props.errorInfo.componentStack || "") |
|
.split("\n") |
|
.slice(0, maxLineCount); |
|
|
|
const error: DisplayError = { |
|
errorName: "What does this do", |
|
type: "global", |
|
message: errorLines.join("\n"), |
|
}; |
|
|
|
return ( |
|
<div className="relative flex flex-1 flex-col min-h-screen"> |
|
<div className="flex h-full flex-1 flex-col items-center justify-center p-5 text-center"> |
|
<ErrorLayout> |
|
<ErrorContainer maxWidth="max-w-2xl"> |
|
<IconPill icon={Icons.EYE_SLASH}>{t("errors.badge")}</IconPill> |
|
<Title>{t("errors.title")}</Title> |
|
<Paragraph>{props.error.toString()}</Paragraph> |
|
<ErrorCard error={error} /> |
|
<ButtonPlain |
|
theme="purple" |
|
className="mt-6 md:px-12 p-2.5" |
|
onClick={() => window.location.reload()} |
|
> |
|
{t("errors.reloadPage")} |
|
</ButtonPlain> |
|
</ErrorContainer> |
|
</ErrorLayout> |
|
</div> |
|
</div> |
|
); |
|
}
|
|
|