import React from 'react';
import { css, cx } from '@leafygreen-ui/emotion';
// @ts-expect-error
import GovernmentBuildingIcon from '@leafygreen-ui/icon/dist/GovernmentBuilding';
import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
import Tooltip from '@leafygreen-ui/tooltip';
import { Body } from '@leafygreen-ui/typography';
import {
bannerContainerBaseStyle,
bannerContainerDesktopBaseStyle,
bannerContainerDesktopThemeStyle,
bannerContainerThemeStyle,
bannerMargin,
bannerTabBaseStyle,
bannerTabThemeStyle,
bodyBaseStyle,
bodyThemeStyle,
iconThemeColor,
mobileContainer,
mobileMargin,
setTabRadius,
} from './GovBanner.styles';
const tooltipContent =
'You are currently logged into the MongoDB Atlas for Government environment.';
const sharedTooltipProps = {
align: 'bottom',
variant: 'dark',
} as const;
function FullWidthGovBanner({ isTablet = false }: { isTablet?: boolean }) {
const { theme, darkMode } = useDarkMode();
const desktopTabStyles = css`
height: 34px;
${setTabRadius(16, darkMode)};
`;
const tabletTabStyles = css`
height: 20px;
${setTabRadius(8, darkMode)};
`;
return (
MongoDB Atlas for Government
}
justify="middle"
triggerEvent={isTablet ? 'click' : 'hover'}
>
{tooltipContent}
);
}
function MobileGovTooltip() {
const { theme } = useDarkMode();
return (
}
usePortal={false}
justify="end"
triggerEvent="click"
>
{tooltipContent}
);
}
export { FullWidthGovBanner, MobileGovTooltip };