@dndbuilder.com/react
Version:
Drag and drop builder for React
57 lines (56 loc) • 2.84 kB
JavaScript
"use client";
import { jsxs as n, jsx as r } from "react/jsx-runtime";
import { Accordion as s } from "../../shared/accordion.js";
import { ScrollArea as p } from "../../shared/scroll-area.js";
import { BuilderConfiguration as c } from "../../../config/builder.config.js";
import { objectKeys as d, classNames as h } from "../../../../../../utils.js";
import { useState as g, useMemo as f } from "react";
import { BiSearch as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import N from "./block-navigation-item.js";
const v = () => {
const [a, u] = g(""), m = c.getBlocks(), o = f(() => m.filter((e) => e.label.toLowerCase().includes(a.toLowerCase())).reduce(
(e, i) => {
const t = i.group ?? "Others";
return e[t] || (e[t] = []), e[t].push(i), e;
},
{}
), [a, m]);
return /* @__PURE__ */ n("div", { className: "block-navigation", children: [
/* @__PURE__ */ r("div", { className: "mt-4 h-12 w-full bg-white px-4", children: /* @__PURE__ */ n("div", { className: "group flex items-center overflow-hidden rounded-sm ring-1 ring-gray-300 focus-within:ring-2 focus-within:ring-gray-600", children: [
/* @__PURE__ */ r("div", { className: "ms-2.5 flex w-7 items-center justify-center", children: /* @__PURE__ */ r(x, { className: " text-gray-500 group-focus-within:text-gray-700", size: 18 }) }),
/* @__PURE__ */ r(
"input",
{
value: a,
onChange: (e) => {
u(e.target.value);
},
type: "text",
className: "focus:outline-hidden w-full rounded-sm border-0 px-1 py-2 text-sm placeholder:text-sm placeholder:text-gray-500 focus:ring-0",
placeholder: "Search..."
}
)
] }) }),
d(o).length === 0 && /* @__PURE__ */ r("div", { className: "py-2 text-center text-sm text-gray-600", children: "No blocks found" }),
/* @__PURE__ */ r(p, { className: "h-[calc(100vh-125px)]", children: /* @__PURE__ */ r(s, { defaultValue: Object.keys(o), type: "multiple", children: d(o).sort((e, i) => {
const t = c.getGroupOrder(e), l = c.getGroupOrder(i);
return t !== -1 && l !== -1 ? t - l : t !== -1 ? -1 : l !== -1 ? 1 : 0;
}).map((e, i) => /* @__PURE__ */ n(s.Item, { value: e, children: [
/* @__PURE__ */ r(
s.Trigger,
{
className: h("px-4", {
"pt-1": i === 0
}),
children: e
}
),
/* @__PURE__ */ r(s.Content, { className: "px-4", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-2 gap-3 py-2", children: o[e].map((t) => /* @__PURE__ */ r(N, { block: t }, t.type)) }) })
] }, e)) }) })
] });
};
v.displayName = "BlockNavigation";
export {
v as BlockNavigation
};
//# sourceMappingURL=block-navigation.js.map