import React from 'react';
import {
css,
cx,
Link,
palette,
spacing,
useDarkMode,
Body,
} from '@mongodb-js/compass-components';
import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
const { track } = createLoggerAndTelemetry('COMPASS-SCHEMA-UI');
const iconSize = spacing[5];
const bannerBodyStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[3],
paddingTop: spacing[2],
paddingBottom: spacing[2],
paddingLeft: spacing[3],
paddingRight: spacing[3],
borderRadius: '12px',
marginLeft: spacing[3],
marginRight: spacing[3],
'&:not(:last-child)': {
marginBottom: spacing[4],
},
});
const bannerBodyLightModeStyles = css({
backgroundColor: palette.gray.light3,
boxShadow: `inset 0 0 0 1px ${palette.gray.light2}`,
});
const bannerBodyDarkModeStyles = css({
backgroundColor: palette.gray.dark3,
boxShadow: `inset 0 0 0 1px ${palette.gray.dark2}`,
});
const bannerIconStyles = css({
width: iconSize,
height: iconSize,
flex: 'none',
});
const bannerTextStyles = css({
flex: 'none',
});
const bannerLinkStyles = css({
flex: 'none',
marginLeft: 'auto',
});
export const HackoladePromoBanner: React.FunctionComponent = () => {
const darkMode = useDarkMode();
return (
Looking for data modeling tools?
{
track('Hackolade Link Clicked');
}}
>
Check out Hackolade Studio.
);
};