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

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var ThemeContext = require('../../themes/ThemeContext.cjs');

"use strict";
const CallToActionCard = ({ message, callToActionElement, footer, className }) => {
  const css2 = ThemeContext.useStyles2(getStyles);
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx([css2.wrapper, className]), children: [
    message && /* @__PURE__ */ jsxRuntime.jsx("div", { className: css2.message, children: message }),
    callToActionElement,
    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: css2.footer, children: footer })
  ] });
};
const getStyles = (theme) => ({
  wrapper: css.css({
    label: "call-to-action-card",
    background: theme.colors.background.secondary,
    borderRadius: theme.shape.radius.default,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    flexGrow: 1,
    padding: theme.spacing(3),
    [theme.breakpoints.down("sm")]: {
      padding: theme.spacing(3, 1)
    }
  }),
  message: css.css({
    marginBottom: theme.spacing(3),
    fontStyle: "italic"
  }),
  footer: css.css({
    marginTop: theme.spacing(3)
  })
});

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