@oberoncms/core
Version:
OberonCMS is a cloud deployable CMS written in typescript based on the Puck visual editor
80 lines (79 loc) • 3.04 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import "@puckeditor/core/puck.css";
import { Button } from "@tohuhono/ui/button";
import { cn, isValidKey } from "@tohuhono/utils";
import { DragHandleDots2Icon, MixerHorizontalIcon, ListBulletIcon, CardStackPlusIcon } from "../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.4/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js";
import { useState } from "react";
import { createUsePuck, Puck } from "@puckeditor/core";
const usePuck = createUsePuck();
const sidebarTabs = {
components: { label: "Components", Icon: CardStackPlusIcon },
outline: { label: "Layout", Icon: ListBulletIcon },
fields: { label: "Page Settings", Icon: MixerHorizontalIcon }
};
const Drawer = ({ children }) => /* @__PURE__ */ jsx("div", { className: "h-full space-y-1", children });
const DrawerItem = ({ name }) => /* @__PURE__ */ jsxs(
"div",
{
className: "\n flex cursor-grab flex-col items-baseline justify-between rounded-sm border\n border-border bg-card px-2 py-1 text-card-foreground shadow-sm\n transition-colors\n hover:bg-accent hover:text-accent-foreground\n ",
children: [
name,
/* @__PURE__ */ jsx(DragHandleDots2Icon, {})
]
}
);
const SidebarTabs = ({
activeTab,
setActiveTab,
className
}) => /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Editor tools", className, children: Object.entries(sidebarTabs).map(([tabValue, { label, Icon }]) => /* @__PURE__ */ jsxs(
Button,
{
role: "tab",
"aria-label": label,
"aria-selected": activeTab === tabValue,
"aria-controls": `editor-tool-${tabValue}`,
title: label,
variant: "tab",
size: "icon",
onClick: () => isValidKey(tabValue, sidebarTabs) && setActiveTab(tabValue),
children: [
/* @__PURE__ */ jsx(Icon, { className: "size-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
]
},
tabValue
)) });
const useSidebarTab = () => {
const [activeTab, setActiveTab] = useState("fields");
return { activeTab, setActiveTab };
};
const SidebarHeading = ({
activeTab,
className
}) => {
const selectedComponent = usePuck(
(s) => s.selectedItem?.type || sidebarTabs["fields"].label
);
const tabLabel = activeTab === "fields" ? selectedComponent : sidebarTabs[activeTab].label;
return /* @__PURE__ */ jsx("h3", { className: cn(className, "p-2 pl-4"), children: tabLabel });
};
const Sidebar = ({
activeTab,
className
}) => {
return /* @__PURE__ */ jsx("div", { className: cn(className, "h-full overflow-auto p-2"), children: /* @__PURE__ */ jsxs("div", { id: `editor-tool-${activeTab}`, role: "tabpanel", children: [
activeTab === "components" && /* @__PURE__ */ jsx(Puck.Components, {}),
activeTab === "outline" && /* @__PURE__ */ jsx(Puck.Outline, {}),
activeTab === "fields" && /* @__PURE__ */ jsx(Puck.Fields, {})
] }) });
};
export {
Drawer,
DrawerItem,
Sidebar,
SidebarHeading,
SidebarTabs,
useSidebarTab
};