@grafana/ui/dist/cjs/components/EmptyState/EmptyState.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var SVG = require('react-inlinesvg');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Box = require('../Layout/Box/Box.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var Text = require('../Text/Text.cjs');
var GrotCTA = require('./GrotCTA/GrotCTA.cjs');
var GrotNotFound = require('./GrotNotFound/GrotNotFound.cjs');
var grotCompleted = require('./grot-completed.svg.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var SVG__default = /*#__PURE__*/_interopDefaultCompat(SVG);

"use strict";
const EmptyState = ({
  button,
  children,
  image,
  message,
  hideImage = false,
  variant,
  role
}) => {
  const styles = ThemeContext.useStyles2(getStyles);
  const imageToShow = image != null ? image : getDefaultImageForVariant(variant);
  return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { paddingY: 4, display: "flex", direction: "column", alignItems: "center", role, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
    !hideImage && imageToShow,
    /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", alignItems: "center", children: [
      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { variant: "h4", textAlignment: "center", children: message }),
      children && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "secondary", textAlignment: "center", children })
    ] }),
    button
  ] }) });
};
function getDefaultImageForVariant(variant) {
  switch (variant) {
    case "call-to-action": {
      return /* @__PURE__ */ jsxRuntime.jsx(GrotCTA.GrotCTA, { width: 300 });
    }
    case "not-found": {
      return /* @__PURE__ */ jsxRuntime.jsx(GrotNotFound.GrotNotFound, { width: 300 });
    }
    case "completed": {
      return /* @__PURE__ */ jsxRuntime.jsx(SVG__default.default, { src: grotCompleted, width: 300 });
    }
    default: {
      throw new Error(`Unknown variant: ${variant}`);
    }
  }
}
const getStyles = (theme) => ({
  container: css.css({
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: theme.spacing(4),
    maxWidth: "600px"
  })
});

exports.EmptyState = EmptyState;
//# sourceMappingURL=EmptyState.cjs.map