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

Create and manage Coder workspaces from Backstage

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

const useStyles = makeStyles((theme) => ({
  root: {
    color: theme.palette.text.primary,
    display: "flex",
    flexFlow: "row nowrap",
    alignItems: "center",
    gap: theme.spacing(1)
  },
  hgroup: {
    marginRight: "auto"
  },
  header: {
    fontSize: "1.5rem",
    lineHeight: 1,
    margin: 0
  },
  subheader: {
    margin: "0",
    fontSize: "0.875rem",
    fontWeight: 400,
    color: theme.palette.text.secondary,
    paddingTop: theme.spacing(0.5)
  }
}));
const HeaderRow = ({
  actions,
  headerLevel,
  className,
  headerClassName,
  hgroupClassName,
  subheaderClassName,
  activeRepoFilteringText,
  headerText = "Coder Workspaces",
  ...delegatedProps
}) => {
  const { headerId, workspacesConfig } = useWorkspacesCardContext();
  const styles = useStyles();
  const HeadingComponent = headerLevel ?? "h2";
  const { repoUrl } = workspacesConfig;
  return /* @__PURE__ */ jsxs("div", { className: `${styles.root} ${className ?? ""}`, ...delegatedProps, children: [
    /* @__PURE__ */ jsxs("hgroup", { className: `${styles.hgroup} ${hgroupClassName ?? ""}`, children: [
      /* @__PURE__ */ jsx(
        HeadingComponent,
        {
          id: headerId,
          className: `${styles.header} ${headerClassName ?? ""}`,
          children: headerText
        }
      ),
      repoUrl && /* @__PURE__ */ jsx("p", { className: `${styles.subheader} ${subheaderClassName ?? ""}`, children: activeRepoFilteringText ?? /* @__PURE__ */ jsxs(Fragment, { children: [
        "Results filtered by ",
        extractRepoName(repoUrl)
      ] }) })
    ] }),
    actions
  ] });
};
const repoNameRe = /^(?:https?:\/\/)?(?:www\.)?(?:github|gitlab|bitbucket)\.com\/.*?\/(.+)?$/i;
function extractRepoName(repoUrl) {
  const [, repoName] = repoNameRe.exec(repoUrl) ?? [];
  return repoName ? `repo: ${repoName}` : "repo URL";
}

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