import "react";
import { Icons } from "../components/Icons/Icons.js";
import { Button } from "../components/Button.js";
import { jsxs, jsx } from "../node_modules/.pnpm/@emotion_react@11.10.4_q4mq7tnhdumujvomvw24zx33y4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
import "../components/Tabs.js";
import { useAppState } from "../lib/useAppState.js";
function PageTile({
  children,
  title,
  pageTitle,
  className,
  titleClassName,
  description,
  component = () => {
  },
  icon,
  subTitle,
  roles = {},
  buttons,
  back,
  onUpdate,
  onRead,
  onCreate,
  onAdd,
  onDelete,
  onLink,
  titleEdit,
  onTitleEdit,
  button,
  onButton,
  onSave,
  ...props
}) {
  const {
    navigate
  } = useAppState();
  return /* @__PURE__ */ jsxs("div", {
    className: "flex items-center justify-between " + (className ? className : "px-8 py-8"),
    children: [/* @__PURE__ */ jsxs("div", {
      className: "flex items-center flex-1 min-w-0",
      children: [/* @__PURE__ */ jsxs("div", {
        className: "flex flex-col flex-1",
        children: [back && /* @__PURE__ */ jsx("div", {
          className: "mb-4 mr-4 sm:block",
          children: /* @__PURE__ */ jsxs("button", {
            type: "button",
            onClick: (e) => back.url && navigate(back.url) || navigate(-1),
            className: "inline-flex items-center font-medium text-sky-600 hover:text-gray-800",
            children: [/* @__PURE__ */ jsx(Icons, {
              name: "back"
            }), back.title || "\u8FD4\u56DE"]
          })
        }), /* @__PURE__ */ jsxs("h1", {
          className: "flex items-center font-bold text-gray-900 sm:truncate " + (titleClassName ? titleClassName : " text-3xl"),
          children: [icon && /* @__PURE__ */ jsx(Icons, {
            name: icon
          }), title || pageTitle]
        }), component({
          navigate
        }), description && /* @__PURE__ */ jsx("p", {
          className: "mt-2 text-gray-400",
          children: description
        })]
      }), titleEdit && /* @__PURE__ */ jsx("div", {
        className: "hidden ml-2 sm:block",
        children: /* @__PURE__ */ jsxs("button", {
          type: "button",
          onClick: (e) => onTitleEdit(e),
          className: "inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500",
          children: [titleEdit.icon, titleEdit.title]
        })
      })]
    }), /* @__PURE__ */ jsxs("div", {
      className: "flex items-center space-x-3 lg:ml-4",
      children: [buttons && buttons.map((item, index) => {
        return /* @__PURE__ */ jsx(Button, {
          ...item
        }, index);
      }), children]
    })]
  });
}
export {
  PageTile
};
//# sourceMappingURL=PageTile.js.map
