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