import { jsx, jsxs } from "react/jsx-runtime";
import { Table, TableRow, TableHeaderCell, TableCell } from "@contember/ui";
import { QueryLoader } from "../QueryLoader.js";
import { useAuthedTenantQuery } from "../../lib/auth.js";
import { LinkButton } from "../../../routing/LinkButton.js";
const ProjectsGrid = ({ projectDetailLink }) => {
  const { state: query } = useAuthedTenantQuery(
    `
		query {
			projects {
				slug
				name
			}
		}`,
    {}
  );
  return /* @__PURE__ */ jsx(QueryLoader, { query, children: ({ query: query2 }) => /* @__PURE__ */ jsx(
    Table,
    {
      tableHead: /* @__PURE__ */ jsxs(TableRow, { children: [
        /* @__PURE__ */ jsx(TableHeaderCell, { children: "Name" }),
        /* @__PURE__ */ jsx(TableHeaderCell, { children: "Slug" }),
        /* @__PURE__ */ jsx(TableHeaderCell, {})
      ] }),
      children: query2.data?.projects.map((project) => /* @__PURE__ */ jsxs(TableRow, { children: [
        /* @__PURE__ */ jsx(TableCell, { children: project.name }),
        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace" }, children: project.slug }) }),
        /* @__PURE__ */ jsx(TableCell, { shrunk: true, children: /* @__PURE__ */ jsx(LinkButton, { to: projectDetailLink, parameters: { projectSlug: project.slug }, children: "Overview and users" }) })
      ] }, project.slug))
    }
  ) });
};
export {
  ProjectsGrid
};
//# sourceMappingURL=ProjectsGrid.js.map
