@grafana/ui
Version:
Grafana Components Library
60 lines (57 loc) • 1.96 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import SVG from 'react-inlinesvg';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { Box } from '../Layout/Box/Box.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
import { Text } from '../Text/Text.mjs';
import { GrotCTA } from './GrotCTA/GrotCTA.mjs';
import { GrotNotFound } from './GrotNotFound/GrotNotFound.mjs';
import GrotCompleted from './grot-completed.svg.mjs';
const EmptyState = ({
button,
children,
image,
message,
hideImage = false,
variant,
role
}) => {
const styles = useStyles2(getStyles);
const imageToShow = image != null ? image : getDefaultImageForVariant(variant);
return /* @__PURE__ */ jsx(Box, { paddingY: 4, display: "flex", direction: "column", alignItems: "center", role, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
!hideImage && imageToShow,
/* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
/* @__PURE__ */ jsx(Text, { variant: "h4", textAlignment: "center", children: message }),
children && /* @__PURE__ */ jsx(Text, { color: "secondary", textAlignment: "center", children })
] }),
button
] }) });
};
function getDefaultImageForVariant(variant) {
switch (variant) {
case "call-to-action": {
return /* @__PURE__ */ jsx(GrotCTA, { width: 300 });
}
case "not-found": {
return /* @__PURE__ */ jsx(GrotNotFound, { width: 300 });
}
case "completed": {
return /* @__PURE__ */ jsx(SVG, { src: GrotCompleted, width: 300 });
}
default: {
throw new Error(`Unknown variant: ${variant}`);
}
}
}
const getStyles = (theme) => ({
container: css({
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: theme.spacing(4),
maxWidth: "600px"
})
});
export { EmptyState };
//# sourceMappingURL=EmptyState.mjs.map