@dndbuilder.com/react
Version:
Drag and drop builder for React
41 lines (40 loc) • 1.54 kB
JavaScript
"use client";
import { jsx as t, jsxs as p } from "react/jsx-runtime";
import { Tooltip as e } from "../../shared/tooltip.js";
import { setCurrentBreakpoint as m } from "../../../store/builder-slice.js";
import { getCurrentBreakpoint as g } from "../../../../../../store/selectors.js";
import { useAppDispatch as l } from "../../../hooks/use-app-dispatch.js";
import { useAppSelector as h } from "../../../hooks/use-app-selector.js";
import { classNames as o } from "../../../../../../utils.js";
import { BuilderConfiguration as d } from "../../../config/builder.config.js";
const N = ({ className: i }) => {
const n = h(g), s = l(), a = d.getBreakpoints(), c = (r) => {
s(m(r));
};
return /* @__PURE__ */ t(
"div",
{
className: o(
"flex h-10 items-center rounded-sm px-2 text-lg ring-1 ring-inset ring-gray-300 transition-colors duration-150 hover:bg-gray-100 hover:ring-gray-600",
i
),
children: a.map((r) => /* @__PURE__ */ p(e, { children: [
/* @__PURE__ */ t(e.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
"div",
{
onClick: () => c(r.key),
className: o("cursor-pointer p-2 text-gray-400 hover:text-gray-800", {
"text-gray-800": n === r.key
}),
children: /* @__PURE__ */ t(r.icon, {})
}
) }),
/* @__PURE__ */ t(e.Content, { children: r.label })
] }, r.key))
}
);
};
export {
N as BreakpointSwitch
};
//# sourceMappingURL=breakpoint-switch.js.map