alinea/dist/field/tabs/Tabs.view.js

Headless git-based CMS

import "../../chunks/chunk-NZLE2WMY.js";

// src/field/tabs/Tabs.view.tsx
import { getType } from "alinea/core/Internal";
import { Section } from "alinea/core/Section";
import { Type } from "alinea/core/Type";
import { InputForm } from "alinea/dashboard/editor/InputForm";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { HStack, TextLabel } from "alinea/ui";
import { Lift } from "alinea/ui/Lift";
import { Sink } from "alinea/ui/Sink";
import { Tabs } from "alinea/ui/Tabs";
import { useElevation } from "alinea/ui/util/Elevation";
import { jsx, jsxs } from "react/jsx-runtime";
function TabsHeader({ section, backdrop }) {
  const tabs = section[Section.Data];
  const visibleTypes = tabs.types.filter((type) => !Type.isHidden(type));
  if (!visibleTypes.length) return null;
  return /* @__PURE__ */ jsx(Tabs.List, { backdrop, children: visibleTypes.map((type, i) => {
    const { icon: Icon } = getType(type);
    return /* @__PURE__ */ jsx(Tabs.Trigger, { children: /* @__PURE__ */ jsxs(HStack, { center: true, gap: 8, children: [
      Icon && /* @__PURE__ */ jsx(Icon, {}),
      /* @__PURE__ */ jsx(TextLabel, { label: Type.label(type) })
    ] }) }, i);
  }) });
}
function TabsView({ section }) {
  const { parent } = useElevation();
  const tabs = section[Section.Data];
  const visibleTypes = tabs.types.filter((type) => !Type.isHidden(type));
  if (!visibleTypes.length) return null;
  const inner = /* @__PURE__ */ jsxs(Tabs.Root, { children: [
    /* @__PURE__ */ jsx(TabsHeader, { section }),
    /* @__PURE__ */ jsx(Lift, { children: /* @__PURE__ */ jsx(Tabs.Panels, { children: visibleTypes.map((type, i) => {
      return /* @__PURE__ */ jsx(Tabs.Panel, { unmount: false, tabIndex: i, children: /* @__PURE__ */ jsx(InputForm, { type, border: false }) }, i);
    }) }) })
  ] });
  return /* @__PURE__ */ jsx("div", { children: parent === "lift" ? /* @__PURE__ */ jsx(InputLabel, { inline: true, children: /* @__PURE__ */ jsx(Sink.Root, { children: /* @__PURE__ */ jsx(Sink.Content, { children: inner }) }) }) : inner });
}
export {
  TabsHeader,
  TabsView
};