55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { DisconnectedIcon, WarningIcon } from "outline-icons";
|
||
import * as React from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import styled from "styled-components";
|
||
import { s } from "@shared/styles";
|
||
import Empty from "~/components/Empty";
|
||
import useEventListener from "~/hooks/useEventListener";
|
||
import { OfflineError } from "~/utils/errors";
|
||
import ButtonLink from "../ButtonLink";
|
||
import Flex from "../Flex";
|
||
|
||
type Props = {
|
||
error: Error;
|
||
retry: () => void;
|
||
};
|
||
|
||
export default function LoadingError({ error, retry, ...rest }: Props) {
|
||
const { t } = useTranslation();
|
||
useEventListener("online", retry);
|
||
|
||
const message =
|
||
error instanceof OfflineError ? (
|
||
<>
|
||
<DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
|
||
</>
|
||
) : (
|
||
<>
|
||
<WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<Content {...rest}>
|
||
<Flex align="center" gap={4} wrap>
|
||
{message}{" "}
|
||
<ButtonLink onClick={() => retry()}>{t("Click to retry")}…</ButtonLink>
|
||
</Flex>
|
||
</Content>
|
||
);
|
||
}
|
||
|
||
const Content = styled(Empty)`
|
||
padding: 8px 0;
|
||
white-space: nowrap;
|
||
|
||
${ButtonLink} {
|
||
color: ${s("textTertiary")};
|
||
|
||
&:hover {
|
||
color: ${s("textSecondary")};
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
`;
|