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