alinea/dist/dashboard/view/entry/EntryTitle.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import {
  useAtom,
  useAtomValue
} from "../../../chunks/chunk-WF77DMLN.js";
import "../../../chunks/chunk-OBOPLPUQ.js";
import "../../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/entry/EntryTitle.tsx
import { EntryPhase, Type } from "alinea/core";
import { renderLabel } from "alinea/core/Label";
import { Chip, HStack, Loader, Stack, fromModule, px } from "alinea/ui";
import { IcRoundArrowBack } from "alinea/ui/icons/IcRoundArrowBack";
import { useWorkspace } from "../../hook/UseWorkspace.js";
import { Head } from "../../util/Head.js";
import { IconLink } from "../IconButton.js";
import { EditModeToggle } from "./EditModeToggle.js";

// src/dashboard/view/entry/EntryTitle.module.scss
var EntryTitle_module_default = {
  "root": "alinea-EntryTitle",
  "root-inner": "alinea-EntryTitle-inner",
  "rootInner": "alinea-EntryTitle-inner",
  "root-title": "alinea-EntryTitle-title",
  "rootTitle": "alinea-EntryTitle-title"
};

// src/dashboard/view/entry/EntryTitle.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(EntryTitle_module_default);
function EntryTitle({
  children,
  editor,
  backLink
}) {
  const { label } = useWorkspace();
  const selectedPhase = useAtomValue(editor.selectedPhase);
  const [editMode, setEditMode] = useAtom(editor.editMode);
  const version = editor.phases[selectedPhase];
  const type = editor.type;
  const activeTitle = useAtomValue(editor.activeTitle);
  const title = selectedPhase === editor.activePhase ? activeTitle : version.title;
  const hasChanges = useAtomValue(editor.hasChanges);
  const isLoading = useAtomValue(editor.isLoading);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("title", { children: title }) }),
    /* @__PURE__ */ jsxs("div", { className: styles.root(), children: [
      /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, className: styles.root.inner(), children: [
        backLink && /* @__PURE__ */ jsx(
          IconLink,
          {
            icon: IcRoundArrowBack,
            href: backLink,
            style: { marginLeft: px(-4) }
          }
        ),
        /* @__PURE__ */ jsxs(HStack, { center: true, gap: 12, children: [
          /* @__PURE__ */ jsx("h1", { className: styles.root.title(), children: /* @__PURE__ */ jsx("span", { children: title }) }),
          /* @__PURE__ */ jsx(Chip, { children: renderLabel(Type.label(type)) }),
          isLoading && /* @__PURE__ */ jsx(Loader, { size: 15 })
        ] }),
        /* @__PURE__ */ jsx(Stack.Right, { children: (hasChanges || editor.availablePhases.includes(EntryPhase.Draft) && editor.availablePhases.length > 1) && /* @__PURE__ */ jsx(
          EditModeToggle,
          {
            mode: editMode,
            onChange: (mode) => setEditMode(mode)
          }
        ) })
      ] }),
      children
    ] })
  ] });
}
export {
  EntryTitle
};