@coder/backstage-plugin-coder/dist/components/CoderWorkspacesCard/Placeholder.esm.js

Create and manage Coder workspaces from Backstage

import { jsxs, jsx } from 'react/jsx-runtime';
import { useWorkspacesCardContext } from './Root.esm.js';
import { makeStyles } from '@material-ui/core';
import { CoderLogo } from '../CoderLogo/CoderLogo.esm.js';
import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.esm.js';

const usePlaceholderStyles = makeStyles((theme) => ({
  root: {
    padding: `${theme.spacing(4)}px 0 ${theme.spacing(5)}px`,
    display: "flex",
    flexFlow: "column nowrap",
    alignItems: "center"
  },
  text: {
    textAlign: "center",
    padding: `0 ${theme.spacing(2.5)}px`,
    fontWeight: 400,
    fontSize: "1.125rem",
    color: theme.palette.text.secondary,
    lineHeight: 1.1
  },
  linkSpacer: {
    paddingTop: theme.spacing(1.5)
  },
  // Styled as a button to be more apparent to sighted users, but exposed as a
  // link for better right-click/middle-click support and screen reader support
  callToActionLink: {
    fontWeight: 500,
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    padding: `${theme.spacing(1)}px ${theme.spacing(1.5)}px`,
    borderRadius: theme.shape.borderRadius,
    boxShadow: theme.shadows[1],
    "&:hover": {
      backgroundColor: theme.palette.primary.dark,
      boxShadow: theme.shadows[2]
    }
  }
}));
const Placeholder = ({
  children,
  displayCta = false
}) => {
  const styles = usePlaceholderStyles();
  const { workspacesConfig } = useWorkspacesCardContext();
  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
    /* @__PURE__ */ jsx(CoderLogo, {}),
    /* @__PURE__ */ jsx("p", { className: styles.text, children }),
    displayCta && /* @__PURE__ */ jsx("div", { className: styles.linkSpacer, children: /* @__PURE__ */ jsxs(
      "a",
      {
        href: workspacesConfig.creationUrl,
        target: "_blank",
        className: styles.callToActionLink,
        children: [
          "Create workspace",
          /* @__PURE__ */ jsx(VisuallyHidden, { children: " (Link opens in new tab)" })
        ]
      }
    ) })
  ] });
};

export { Placeholder };
//# sourceMappingURL=Placeholder.esm.js.map