@backstage/plugin-home-react/dist/components/ContentModal.esm.js

A Backstage plugin that contains react components helps you build a home page

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Link } from '@backstage/core-components';
import Modal from '@material-ui/core/Modal';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
  (theme) => ({
    contentModal: {
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)",
      width: "80%",
      height: "auto"
    },
    linkText: {
      marginBottom: theme.spacing(1.5)
    }
  }),
  { name: "PluginHomeContentModal" }
);
const ContentModal = (props) => {
  const { modalContent, linkContent } = props;
  const styles = useStyles();
  const [open, setOpen] = useState(false);
  return /* @__PURE__ */ jsxs("div", { className: styles.linkText, "data-testid": "content-modal-container", children: [
    /* @__PURE__ */ jsx(
      Link,
      {
        to: "#",
        component: "button",
        variant: "h6",
        underline: "none",
        onClick: () => setOpen(true),
        children: linkContent
      }
    ),
    /* @__PURE__ */ jsx(
      Modal,
      {
        open,
        onClose: () => setOpen(false),
        "aria-labelledby": "content-modal",
        "data-testid": "content-modal",
        children: /* @__PURE__ */ jsx(Box, { className: styles.contentModal, "data-testid": "content-modal-open", children: modalContent })
      }
    )
  ] });
};

export { ContentModal, useStyles };
//# sourceMappingURL=ContentModal.esm.js.map