0087e37f30
* Enable @typescript-eslint/consistent-type-imports lint rule This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to. Revert "Enable @typescript-eslint/consistent-type-imports lint rule" This reverts commit ba385fa00b7e410cc508fd5fb9fe972233ae114f. Enable @typescript-eslint/consistent-type-imports lint rule This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to. . * Format
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
/*
|
|
Copyright 2023, 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import classNames from "classnames";
|
|
import { type FC, type HTMLAttributes, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import styles from "./DisconnectedBanner.module.css";
|
|
import { type ValidClientState, useClientState } from "./ClientContext";
|
|
|
|
interface Props extends HTMLAttributes<HTMLElement> {
|
|
children?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const DisconnectedBanner: FC<Props> = ({
|
|
children,
|
|
className,
|
|
...rest
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const clientState = useClientState();
|
|
let shouldShowBanner = false;
|
|
|
|
if (clientState?.state === "valid") {
|
|
const validClientState = clientState as ValidClientState;
|
|
shouldShowBanner = validClientState.disconnected;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{shouldShowBanner && (
|
|
<div className={classNames(styles.banner, className)} {...rest}>
|
|
{children}
|
|
{t("disconnected_banner")}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|